我有一段html代码,主要是元标签。 我正在尝试为移动设备重新设计布局,因此我想知道我正在使用的元标记对于移动布局是否是必需的。 代码块如下:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<title>ConquestRealms - Home</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="cleartype" content="on">
它们是否有必要取决于您尝试定位的“移动”设备。
我只用过:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
并且仅使用 Respond.js 和 @media 查询就在许多移动设备上取得了不错的结果。
可能有帮助:
http://www.alistapart.com/articles/responsive-web-design
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices
你所拥有的已经相当不错了,但不要忘记在 html 文件的顶部添加
<!DOCTYPE html>
。我发现在某些情况下这会严重影响移动设备上的外观。
我也喜欢包含设计元标签。之前的回复中没有提到。它们允许全屏显示并更改浏览器栏的颜色。不错!
<meta name="theme-color" content="#ff0000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My Web App">
<meta name="apple-mobile-web-app-title" content="Mobile rules">
<meta name="apple-mobile-web-app-status-bar-style" content="red">
https://www.onlinegenericmedicine.com/
如何检查移动优先索引的元数据。