web-dev-qa-db-ja.com

モバイルデバイス用の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">
htmlmobilemeta-tags
12
JaPerk14

それらが必要かどうかは、ターゲットにしようとしている「モバイル」デバイスによって異なります。

私は少しだけ使用しました：

<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-n both /

http://css-tricks.com/snippets/css/media-queries-for-standard-devices

https://github.com/scottjehl/Respond

15
ooXei1sh
  • 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>
8
John Magnolia

あなたが持っているものはすでにかなり良いですが、あなたのhtmlファイルの先頭に<!DOCTYPE html>を追加することを忘れないでください。これがモバイルデバイスの外観に大きな影響を与えるケースがあることがわかりました。

2
will.fiset