सभी मोबाइल ब्राउज़र के लिए पूर्ण वेबपृष्ठ और अक्षम ज़ूम व्यूपोर्ट मेटा टैग

मैं चाहता हूं कि मेरा वेबपृष्ठ पूर्ण स्क्रीन हो और सभी मोबाइल उपकरणों पर ज़ूमिंग अक्षम करें।सभी मोबाइल ब्राउज़र के लिए पूर्ण वेबपृष्ठ और अक्षम ज़ूम व्यूपोर्ट मेटा टैग

मेटा टैग के साथ

<meta name="viewport" content="width=1165, user-scalable=no">

मैं iPhone/iPad के लिए यह करने के लिए कर रहा हूँ, लेकिन Android उपकरणों पर वेबसाइट के बारे में 125% करने के लिए ज़ूम इन करता है।

अगर मैं टैग

<meta name="viewport" content="width=max-device-width, user-scalable=no">

का उपयोग मैं विपरीत परिणाम मिलता है। तो फिर यह एंड्रॉइड पर काम करता है लेकिन यह आईपैड/आईफोन पर काम नहीं करता है।

स्रोत

2012-07-05 Coen Ponsen

+11

मैं अपने ज़ूम को अक्षम करने के लिए आपको नफरत करता हूं। ईमानदारी से। –

हाहाहा :) जिस तरह से मैं इसे अब देखता हूं ... और यह तब भी मेरा समाधान साबित हुआ।उत्तरदायी साइटों के शुरुआती दिनों में मुझे यह विचार महसूस हुआ कि ज़ूमिंग अक्षम होना चाहिए ... –

डेवलपर, कृपया यह मत करें! यह आपकी साइट को खराब दृष्टि वाले लोगों के लिए पूरी तरह से असंभव प्रदान कर सकता है! ज़ूम आउट-आउट दृश्य के लिए बस बनाएं, लेकिन लोगों को ज़ूम करें। समारोह एक कारण के लिए है! – rickythefox

एचटीएमएल

<head> 
    <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'> 
</head>

jQuery

विकल्प 1:

$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');

विकल्प 2:

var deviceSpecific = { 
    iPad: 'width=1165,user-scalable=no' 
}; 
if(navigator.userAgent.match(/iPad/i){ 
    $('meta[name=viewport]').attr('content',deviceSpecific.iPad); 
}

यदि आप असंगतता पा रहे हैं तो विकल्प दो अंतिम उपाय का थोड़ा सा हिस्सा है।

स्रोत

2012-07-05 14:37:17 Alastair

आपके thws के लिए हाय thx। मैंने कोशिश की: एंड्रॉइड पर यह अभी भी पूर्ण पृष्ठ नहीं दिखाता है और ज़ूमिंग अभी भी सक्षम है। आईपैड पर यह ज़ूम लगभग स्क्रीन में फिट बैठता है, लेकिन अगर मैं परिदृश्य से पोर्ट्रेट या वीज़ा के विपरीत बदलता हूं तो यह संकल्प रखता है ... आपके लिए कोई अच्छी जांच नहीं है .. –

मेरे पास घर पर आईटॉय तक पहुंच नहीं है लेकिन आप के रूप में देख रहे हैं पहले से ही jQuery का उपयोग कर रहे हैं, यह आपके प्रश्न का उत्तर देना चाहिए हालांकि शायद अधिक कुशल तरीका है ... – Alastair

दुर्भाग्य से प्रत्येक ब्राउज़र के पास व्यूपोर्ट मेटा टैग का अपना कार्यान्वयन होता है। विभिन्न संयोजन विभिन्न ब्राउज़रों पर काम करेंगे।

एंड्रॉइड 2.2: व्यूपोर्ट मेटा टैग बिल्कुल समर्थित नहीं प्रतीत होता है।

एंड्रॉयड 2.3.x/3.x: उपयोगकर्ता के स्केलेबल की स्थापना करके = नहीं आप व्यूपोर्ट मेटा की स्केलिंग खुद के रूप में अच्छी तरह से टैग करें अक्षम करें। शायद यही कारण है कि आपके चौड़ाई विकल्प का कोई प्रभाव नहीं पड़ रहा है। ब्राउज़र को आपकी सामग्री को स्केल करने की अनुमति देने के लिए, आपको उपयोगकर्ता-स्केलेबल = हाँ सेट करने की आवश्यकता है, फिर ज़ूम अक्षम करने के लिए आप न्यूनतम और अधिकतम स्केल को उसी मान पर सेट कर सकते हैं ताकि यह संकीर्ण या बढ़ सके। जब तक आपकी साइट चुपके से फिट न हो जाए तब तक प्रारंभिक पैमाने पर खिलौना।

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />

Android 4.x: वही नियम न्यूनतम और अधिकतम तराजू को छोड़कर 2.3.x के रूप में लागू अब और सम्मानित नहीं कर रहे हैं और यदि आप का उपयोग उपयोगकर्ता-मापनीय = हाँ उपयोगकर्ता हमेशा की तरह, यह स्थापित करने ज़ूम कर सकते हैं 'नो' का मतलब है कि आपके स्वयं के पैमाने को नजरअंदाज कर दिया गया है, यही वह मुद्दा है जिसका मैं अब सामना कर रहा हूं जिसने मुझे इस प्रश्न पर आकर्षित किया ... आप एक ही समय में 4.x में ज़ूम और स्केल अक्षम नहीं कर सकते हैं।

आईओएस/सफारी (4.x/5.x परीक्षण किया): तराजू अपेक्षित तरीके से, आप उपयोगकर्ता के स्केलेबल साथ स्केलिंग निष्क्रिय कर सकते हैं = 0 (कीवर्ड्स हां/नहीं 4.x में काम नहीं करते)। आईओएस/सफारी में लक्ष्य-घनत्व डीपी की कोई अवधारणा नहीं है, इसलिए आपको त्रुटियों से बचने के लिए इसे छोड़ना चाहिए। आपको न्यूनतम और अधिकतम की आवश्यकता नहीं है क्योंकि आप अपेक्षित तरीके से ज़ूमिंग बंद कर सकते हैं।केवल चौड़ाई का उपयोग करें या आप iOS orientation bug

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

क्रोम में चलाने होगी: तराजू अपेक्षित तरीके से की तरह वे आईओएस, न्यूनतम और अधिकतम में क्या सम्मानित कर रहे हैं और आप उपयोगकर्ता- का उपयोग करके जूमिंग बंद कर सकता है स्केलेबल = नहीं।

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />

निष्कर्ष: आप कुछ काफी सरल जे एस का उपयोग कर सकते कुछ बुनियादी ब्राउज़र/डिवाइस का पता लगाने के बाद तदनुसार सामग्री स्थापित करने के लिए। मुझे पता है कि इस प्रकार का पता लग रहा है लेकिन इस मामले में यह लगभग अपरिहार्य है क्योंकि प्रत्येक विक्रेता चला गया है और अपनी खुद की चीज कर चुका है! उम्मीद है कि यह लोगों को व्यूपोर्ट से लड़ने में मदद करता है, और अगर किसी के पास एंड्रॉइड 4.x में ज़ूमिंग को अक्षम करने का कोई समाधान है, तो व्यूपोर्ट के उपयोग के बिना, कृपया मुझे बताएं।

[संपादित करें]

Android 4.x क्रोम ब्राउज़र (जो मुझे लगता है कि ज्यादातर देशों में पहले से स्थापित है): आप यकीन है कि उपयोगकर्ता ज़ूम नहीं कर सकते हैं कर सकते हैं और पेज फुलस्क्रीन है। नकारात्मकता: आपको यह सुनिश्चित करना होगा कि सामग्री की एक निश्चित चौड़ाई है। मैंने निम्न एंड्रॉइड संस्करणों पर इसका परीक्षण नहीं किया है। ऐसा करने के लिए इस उदाहरण देखें:

<meta name="viewport" content="width=620, user-scalable=no" />

[संपादित करें 2]

आईओएस/सफारी 7.1: v7.1 के बाद से, एप्पल व्यूपोर्ट मेटा minimal-ui कहा जाता है टैग के लिए एक नया झंडा पेश किया है। पूर्ण स्क्रीन ऐप्स में सहायता के लिए, यह एक पूर्ण-स्क्रीन अनुभव के लिए पता बार और नीचे टूलबार छुपाता है (बिल्कुल पूर्ण स्क्रीन एपीआई नहीं बल्कि बंद है और उपयोगकर्ता स्वीकृति की आवश्यकता नहीं है)। यह fair share of bugs as well के साथ आता है और आईपैड में काम नहीं करता है।

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />

[संपादित करें 3]

आईओएस/सफारी 8 बीटा 4: व्यूपोर्ट minimal-ui संपादित 2 में उल्लेख किया है अब इस रिलीज में एप्पल द्वारा हटा दिया गया है। Source - WebKit Notes

स्रोत

2012-09-04 19:50:29 BrutalDev

उपयोगी लेख के लिए धन्यवाद। मैं एंड्रॉइड पर क्रोम के साथ संघर्ष कर रहा था। एंड्रॉइड 4.x स्टॉक ब्राउज़र के लिए, हम व्यूपोर्ट चौड़ाई को पिक्सल में सेट करके उल्लिखित समस्या के आसपास काम करते हैं। मान लीजिए कि आप 1.3 का एक निश्चित पैमाने चाहते हैं, व्यूपोर्ट witdh Math.floor ((screen.availWidth * 10)/13) होना चाहिए। हमने उस नंबर को कुकी में रखा है, फिर सर्वर साइड कोड को सही मेटा टैग सेट करने की अनुमति देने के लिए एक रीलोड को मजबूर करें। –

कृपया इस स्क्रिप्ट दृष्टिकोण को आपने प्रदान किया है ... – vsync

इस उत्तर को और अधिक वोट चाहिए –

, बस का उपयोग करें:

<meta name="HandheldFriendly" content="True" />

पर मेरे सैमसंग नोट द्वितीय और एचटीसी डिजायर अच्छी तरह से काम करता है।

स्रोत

2013-05-23 13:40:36

यह एंड्रॉइड क्रोम ब्राउज़र के लिए काम करता है, मेरे मामले में क्रोम इस मेटा टैग को जोड़ने के बिना व्यूपोर्ट का पता नहीं लगाएगा – vangoz

एप्पल उपकरणों के लिए आसान है: जब आप इसे iPhone/iPod/iPad के होम स्क्रीन पर रखा एक शॉर्टकट आइकन के माध्यम से खोलने

<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />

पहली टैग पूर्ण स्क्रीन मोड में वेब अनुप्रयोग चलाते हैं।

दूसरा टैग केवल पहले के संयोजन के साथ काम करता है। संभावित मान हैं: डिफ़ॉल्ट, काला और काला पारदर्शी।

तीसरा टैग साइट चौड़ाई को अपने मानक आकार (1.0) पर अवरुद्ध करता है और ज़ूमिंग की अनुमति नहीं देता है।

नोट: गैर-ऐप्पल उपकरणों पर "सेब-मोबाइल" मेटा टैग को अनदेखा किया जाता है और तीसरा टैग एचटीएमएल 5 में आधिकारिक है, तो आप उन सभी का एक साथ उपयोग कर सकते हैं।

एंड्रॉइड आपके पास वैश्विक समाधान नहीं है क्योंकि हर कोई डिफ़ॉल्ट एंड्रॉइड वेबब्रोसर का उपयोग नहीं करता है। देखें Fullscreen Web App for Android

यहाँ कुछ अन्य उपयोगी लिंक

iOS के लिए सुझाव: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

सभी आधिकारिक और अनाधिकारिक ज्ञात मेटा: https://gist.github.com/kevinSuttle/1997924

स्रोत

2013-06-08 22:14:24

मैं इस और यहां तक कि के साथ समस्याओं के सभी प्रकार हो रही थी विभिन्न ब्राउज़रों को अलग-अलग व्यूपोर्ट टैग वितरित करने के लिए ब्राउज़र पहचान प्रणाली बनाना शुरू कर दिया। तब मैंने यह तय करने का फैसला किया कि मैं क्या कर रहा था और सबकुछ काम करता था। व्यूपोर्ट को उस चौड़ाई पर सेट करें जिसे आप अपनी साइट चाहते हैं और चले जाओ सबकुछ अब काम कर रहा है।

<meta name="viewport" content="width=1165 />

स्रोत

2013-06-28 06:26:19

क्या इसके लायक है के लिए, यहाँ क्या मैं अपने नेक्सस 7 (Android 4.2.2) पर वास्तव में पूर्ण स्क्रीन पर जाने के लिए एक 1024px गुणा चौड़ाई सामग्री पृष्ठ प्राप्त करने के लिए प्रयोग किया जाता है/क्रोम, केवल परिदृश्य जावास्क्रिप्ट का सहारा के बिना *:

width=device-width, initial-scale=.94, minimum-scale=0.8, maximum-scale=1.2, user-scalable=no

(मुझे लगता है कि उपयोगकर्ता-स्केलेबल = वास्तव में न्यूनतम -अधिकतम-पैमाने पर अस्वीकार नहीं करता है)। मुझे परीक्षण और त्रुटि से .94 मान मिला, किसी भी प्रकार की गणना डिवाइस पिक्सेल घनत्व या उस तरह की कुछ भी नहीं।

* यानी। खिड़की से मिलान करने के लिए सामग्री चौड़ाई को मजबूर करने के लिए - मैंने सशर्त रूप से व्यूपोर्ट मेटा सामग्री लिखने के लिए जेएस का उपयोग किया था।

<script> 
    if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) { 
    document.write("<meta name='viewport' content='width=1165, user-scalable=no'>"); // or whichever meta tags make sense for your site 
    } else { 
    document.write("<meta name='viewport' content='width=max-device-width, user- scalable=no'>"); // again, which ever meta tags you need 
    } 
</script>

आप अतिरिक्त शर्तें जोड़ने और उन्हें अपने विशिष्ट जरूरतों के लिए सेट कर सकते हैं:

स्रोत

2013-07-23 17:39:13

<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>

स्रोत

2014-05-22 01:54:49 Shakeel

हम मेटा टैग सेट करने के लिए शीर्ष लेख में निम्नलिखित जावास्क्रिप्ट का इस्तेमाल किया।

स्रोत

2014-06-05 18:33:47

दान बी के नीचे दिए गए सुझाव ने मेरे लिए बहुत अच्छा काम किया है, मेरे पास एंड्रॉइड पर अपनी साइट को लोड करने की कोशिश करने के सभी प्रकार के मुद्दे हैं, और इसने इसे हल किया है। अभी के लिए वैसे भी!

<meta name="viewport" content="width=YOUR_SITE_WIDTH"/>

धन्यवाद!

स्रोत

2014-06-11 08:03:09 user2390584

Android संस्करण 4.4.2

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />

स्रोत

2014-08-15 08:41:43 jargalan

मैं एक Samsung Galaxy Note 4 है और अपने ब्राउज़र के रूप में क्रोम का उपयोग से यह तय हो गई। मैंने पाया कि यह व्यूपोर्ट मेटा टैग को अनदेखा कर रहा था, इसे हैंडहेल्ड फ्रेंडेंडली के साथ काम करने के लिए मिला। मैं मेटा टैग कॉम्बो के साथ समाप्त हुआ। एंड्रॉइड और आईओएस पर मेरे लिए काम करता है।

<meta name="HandheldFriendly" content="True"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="viewport" content="width=YOUR_SITE_WIDTH">

स्रोत

2014-12-31 15:37:13 Giacomo

मैं आईफोन में ज़ूम को रोकने के लिए इस कोड का उपयोग कर रहा हूं और समस्या हल हो गई है लेकिन एक और समस्या उत्पन्न होती है; जब मैं इनपुट फ़ील्ड पर क्लिक करता हूं तो पूरी विंडो कूद जाती है तो उसके स्थिति को सामान्य पर सेट करता है, जब मैंने बटन दबाया तो वही व्यवहार होता है और विंडोज कूदता है। मुझे कूदने से छुटकारा पाना है ताकि केवल खिड़की इसे सामान्य स्थान पर बदल दे।

function zoomDisable(){ 
    $('head meta[name=viewport]').remove(); 
    $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />'); 
}

स्रोत

2016-02-04 04:19:03

सभी मोबाइल ब्राउज़र के लिए पूर्ण वेबपृष्ठ और अक्षम ज़ूम व्यूपोर्ट मेटा टैग

उत्तर

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