Question

我有一块html代码，主要是meta标签。我正在尝试重新设计移动设备的布局，所以我想知道我使用的元标记是否是移动布局所必需的。下面提供了代码块：

<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">

Answer 1

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

我用得很少：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

并且仅使用Respond.js和@media查询在许多移动设备上取得了不错的结果。

可能会有所帮助：

http://html5boilerplate.com/mobile/

http://davidbcalhoun.com/2010/viewport-metatag/

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

Answer 2

charset应该是第一位的，它是浏览器首先阅读的内容，为什么不呢。但它并没有什么不同。
您可能需要更换/删除我的Smarty标签/评论

还要注意加载其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="notranslate">
    <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>

Answer 3

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

Answer 4

我也希望包含设计元标记。以前的答复中未提及。它们允许全屏显示并更改浏览器栏的颜色。很好！

<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">

用于移动设备的html元标记

4 个答案: