13

我有一段 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">
4

3 回答 3

17

它们是否必要取决于您尝试定位的“移动”设备。

我只用过：

<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

https://github.com/scottjehl/Respond

于 2012-12-14T03:02:24.327 回答
3

你所拥有的已经很不错了，但不要忘记<!DOCTYPE html>在你的 html 文件的顶部添加。我发现在某些情况下，这会显着影响移动设备上的外观。

于 2015-07-27T15:59:56.877 回答
0

我也喜欢包含设计元标签。之前的回复中没有提到。它们允许全屏显示并更改浏览器栏的颜色。好的！

<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">
于 2020-11-07T15:18:43.223 回答