移动设备的 html 元标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13871836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html meta tags for mobile devices
提问by JaPerk14
I have a block of html code, which is mainly meta tags. I'm trying to re-design my layout for mobile devices, so I want to know if the meta tags that I'm using are necessary for a mobile layout. The block of code is provided below:
我有一段 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">
回答by ooXei1sh
whether or not they are necessary depends on what "mobile" device you are trying to target.
它们是否必要取决于您尝试定位的“移动”设备。
I've used as little as:
我用过的很少：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
and achieved decent results across a number of mobile devices using just Respond.js and @media queries.
并且仅使用 Respond.js 和 @media 查询就在许多移动设备上取得了不错的结果。
may be helpful:
可能有帮助：
http://html5boilerplate.com/mobile/
http://html5boilerplate.com/mobile/
http://davidbcalhoun.com/2010/viewport-metatag/
http://davidbcalhoun.com/2010/viewport-metatag/
http://www.alistapart.com/articles/responsive-web-design
http://www.alistapart.com/articles/responsive-web-design
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices
http://css-tricks.com/snippets/css/media-queries-for-standard-devices
回答by John Magnolia
- charset should really come first, it the first thing the browser will read so why not. But it doesn't make a difference.
- You may need to replace/remove my Smarty tags/comments
- 字符集应该真正排在第一位，它是浏览器读取的第一件事，为什么不呢。但这没什么区别。
- 您可能需要替换/删除我的 Smarty 标签/评论
Also note the trick in loading its CND jquery or local version.
还要注意加载其 CND jquery 或本地版本的技巧。
<head>
<meta charset="utf-8" />
<title>Page title</title>
<!-- Robots -->
{* Tell robots how to index the content, and/or follow links *}
<meta name="title" content="">
<meta name="description" content="">
<meta name="google" content="">
<meta name="robots" content="noindex, nofollow">
{*}<meta name="google-site-verification" content="">{/*}
<!-- Humans -->
<meta name="author" content="Company">
<meta name="Copyright" content="Copyright {$smarty.now|date_format:"%Y"}. All Rights Reserved.">
{* Dublin Core Metadata : http://dublincore.org *}
<meta name="DC.title" content="Stackoverflow">
<meta name="DC.subject" content="Q and A.">
<meta name="DC.creator" content="John Magnolia">
<!-- Browsers -->
{* Mobile Viewport Fix j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
- device-width: Full width of the screen
- initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
- maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width *}
<meta name="viewport" content="width=device-width">
{* Grab Google CDN's jQuery. fall back to local if necessary *}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>window.jQuery || document.write("/js/vendors/jquery-1.8.3.min.js'>\x3C/script>")</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script>window.jQuery || document.write("/js/vendors/jquery-ui-1.9.2.min.js'>\x3C/script>")</script>
{* Traditional favicon size: 16x16 or 32x32, with optional transparency *}
<link rel="icon" type="image/vnd.microsoft.icon" href="/img/icon/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/img/icon/favicon.ico">
<link rel="apple-touch-icon" href="/img/icon/apple-touch-icon-57-precomposed.png">
{* iOS's Web Clip Icon:
- Size: 57x57 older iPhones, 72x72 iPads, 114x114 iPhone4 retina display
- To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png *}
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if IE 6]><link href="/css/plugin/bootstrap/bootstrap-ie6.css" rel="stylesheet"><![endif]-->
<!--[if IE 8]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
</head>
回答by will.fiset
What you have is already pretty good, but do not forget to add <!DOCTYPE html>at the top of your html file. I found that there have been cases where this has significantly effected the look on a mobile device.
你所拥有的已经很不错了，但不要忘记<!DOCTYPE html>在你的 html 文件的顶部添加。我发现在某些情况下，这会显着影响移动设备上的外观。
