モバイルデバイス用のhtmlメタタグ

私は主にメタタグである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">

出典

2012-12-14 JaPerk14

サイドノート：これはウェブサイトやアプリのためのものですか？ウェブサイトが 'user-scalable = no'を使うときは**嫌いです。 –

対象となるかどうかは、対象とする「モバイル」デバイスによって異なります。

私は少しのように使用してきました：

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

https://github.com/scottjehl/Respond

出典

2012-12-14 03:02:24 ooXei1sh

できるだけ多くのモバイルデバイスをターゲットに設定しようとしています。ビューポートのメタタグだけで良い結果が得られたら、handheldfriendly、mobileoptimized、cleartypeのメタタグを使って、モバイルデバイスのより良い結果を得ることができますか？ – JaPerk14

この回答でタグの意味を説明できますか？具体的にはMobileOptimizedタグ。検索で私をここに導きます。 –

@MikeLyons：MobileOptimizedタグは、IE Mobileのモバイルレイアウトを強制するのに使用できます（私が言う最も一般的な使用法）： "MOBILEOPTIMIZEDメタタグを設定するのはレイアウトメニューのデスクトップ選択と同じです。モバイルは、メタタグを含むページのレイアウトをまったく変更しません。（続きを読む：https://msdn.microsoft.com/en-us/library/bb431690.aspx）。 – Bell

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>

出典

2013-03-21 23:48:12

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

出典

2015-07-27 15:59:56

モバイルデバイス用のhtmlメタタグ

答えて

関連する問題