Html метатеги для мобильных устройств

У меня есть блок 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">

ОТВЕТЫ

Ответ 1

независимо от того, нужны они или нет, зависит от того, какое "мобильное" устройство вы пытаетесь настроить.

Я использовал всего лишь:

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

и достигли достойных результатов по нескольким мобильным устройствам, используя только запросы Resppond.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

Ответ 2

  • charset действительно должен быть первым, это первое, что браузер прочитает, так почему бы и нет. Но это не имеет значения.
  • Возможно, вам придется заменить/удалить теги/комментарии Smarty

Также обратите внимание на трюк при загрузке jQuery или локальной версии CND.

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

Ответ 3

У вас уже неплохо, но не забудьте добавить <!DOCTYPE html> вверху вашего html файла. Я обнаружил, что были случаи, когда это существенно повлияло на внешний вид мобильного устройства.