मोबाइल उपकरणों के लिए एचटीएमएल मेटा टैग

मेरे पास एचटीएमएल कोड का एक ब्लॉक है, जो मुख्य रूप से मेटा टैग है। मैं मोबाइल उपकरणों के लिए अपना लेआउट फिर से डिज़ाइन करने की कोशिश कर रहा हूं, इसलिए मैं जानना चाहता हूं कि मेटा टैग जो मैं उपयोग कर रहा हूं, मोबाइल लेआउट के लिए आवश्यक है या नहीं। कोड का ब्लॉक नीचे प्रदान किया गया है:मोबाइल उपकरणों के लिए एचटीएमएल मेटा टैग

<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

साइड नोट: क्या यह किसी वेबसाइट या ऐप के लिए है? क्योंकि जब ** वेबसाइट 'उपयोगकर्ता-स्केलेबल = नहीं' का उपयोग करती है तो मैं ** ** से नफरत करता हूं। –

चाहे वे आवश्यक हैं या नहीं, "मोबाइल" डिवाइस पर निर्भर करता है कि आप किस लक्ष्य को लक्षित करने की कोशिश कर रहे हैं।

मैं कम से कम उपयोग किया है:

<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

स्रोत

2012-12-14 03:02:24 ooXei1sh

मैं जितना कर सकता हूं उतने मोबाइल डिवाइस को लक्षित करने की कोशिश कर रहा हूं। यदि आपको केवल व्यूपोर्ट मेटा टैग से सभ्य परिणाम प्राप्त हुए हैं, तो क्या यह कहना उचित है कि मुझे हैंडहेल्ड फ्रेंडली, मोबाइलोपटाइमाइज्ड और क्लीयरटाइप मेटा टैग का उपयोग करके मोबाइल उपकरणों के लिए भी बेहतर परिणाम मिलेंगे? – JaPerk14

किसी भी तरह से आप समझ सकते हैं कि टैग इस जवाब में क्या मतलब है? विशेष रूप से मोबाइल ऑप्टीमाइज्ड टैग, जो मुझे यहां एक खोज में ले जाता है। –

@ माइकलियंस: मोबाइल ऑप्टीमाइज्ड टैग का उपयोग आईई मोबाइल पर _force_ मोबाइल लेआउट के लिए किया जा सकता है (सबसे आम उपयोग मैं कहूंगा): "MOBILEOPTIMIZED मेटा टैग सेट करना लेआउट मेनू डेस्कटॉप चयन के बराबर है। जब मोबाइलप्लिमाइज्ड मेटा टैग इंटरनेट एक्सप्लोरर सेट किया जाता है मोबाइल मेटा टैग वाले पेज के लिए लेआउट को बिल्कुल संशोधित नहीं करता है। " (और पढ़ें: https://msdn.microsoft.com/en-us/library/bb431690.aspx)। – Bell

चारसेट वास्तव में, पहले आना चाहिए यह पहली बात तो क्यों नहीं ब्राउज़र पढ़ा जाएगा। लेकिन इससे कोई फर्क नहीं पड़ता है।
आप की जगह/मेरी चतुर टैग हटा करना पड़ सकता है/टिप्पणी

इसके अलावा अपने 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

मोबाइल उपकरणों के लिए एचटीएमएल मेटा टैग

उत्तर

संबंधित मुद्दे