मेरे पास मोबाइल सफारी ब्राउज़र के लिए एक AJAX ऐप है जिसे विभिन्न प्रकार की सामग्री प्रदर्शित करने की आवश्यकता है।
कुछ सामग्री के लिए, मुझे ज़रूरत है user-scalable=1और अन्य लोगों के लिए, मुझे ज़रूरत है user-scalable=0।
क्या पेज को रीफ्रेश किए बिना सामग्री विशेषता के मूल्य को संशोधित करने का कोई तरीका है?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />जवाबों:
मुझे लगता है कि यह थोड़ा पुराना है, लेकिन, हां यह किया जा सकता है। आपको शुरू करने के लिए कुछ जावास्क्रिप्ट:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
बस उन हिस्सों को बदलें जिनकी आपको ज़रूरत है और मोबाइल सफारी नई सेटिंग्स का सम्मान करेगी।
अपडेट करें:
यदि आपके पास स्रोत में पहले से ही मेटा व्यूपोर्ट टैग नहीं है, तो आप इसे सीधे कुछ इस तरह से जोड़ सकते हैं:
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);
या यदि आप jQuery का उपयोग कर रहे हैं:
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');$('head').append('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">'); या, jQuery के बिना:document.getElementsByTagName('head')[0].appendChild( ... );
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
अपने में <head>
<meta id="viewport"
name="viewport"
content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />
आपकी जावास्क्रिप्ट में कहीं
document.getElementById("viewport").setAttribute("content",
"initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");
... लेकिन अपने डिवाइस के लिए इसे ट्विक करने के साथ शुभकामनाएं, घंटों तक फिडिंग ... और मैं अभी भी वहां नहीं हूं!
यह अधिकांश भाग के लिए उत्तर दिया गया है, लेकिन मैं विस्तार करूंगा ...
चरण 1
मेरा लक्ष्य निश्चित समय पर ज़ूम सक्षम करना था, और इसे दूसरों पर अक्षम करना था।
// enable pinch zoom
var $viewport = $('head meta[name="viewport"]');
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=4');
// ...later...
// disable pinch zoom
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');
चरण 2
व्यूपोर्ट टैग अपडेट होगा, लेकिन चुटकी ज़ूम अभी भी सक्रिय था !! मुझे परिवर्तन प्राप्त करने के लिए पृष्ठ प्राप्त करने का एक तरीका खोजना था ...
यह एक हैक समाधान है, लेकिन शरीर की अस्पष्टता टॉगल करने का काम किया। मुझे यकीन है कि इसे पूरा करने के अन्य तरीके हैं, लेकिन यहां मेरे लिए काम किया गया है।
// after updating viewport tag, force the page to pick up changes
document.body.style.opacity = .9999;
setTimeout(function(){
document.body.style.opacity = 1;
}, 1);
चरण 3
मेरी समस्या ज्यादातर इस बिंदु पर हल हो गई थी, लेकिन काफी नहीं। मुझे पृष्ठ के वर्तमान ज़ूम स्तर को जानने की आवश्यकता है ताकि मैं पृष्ठ पर फिट होने के लिए कुछ तत्वों का आकार बदल सकूं (मानचित्र मार्करों के बारे में सोचें)।
// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;
मुझे उम्मीद है कि इससे किसी को मदद मिलेगी। मैंने समाधान खोजने से पहले अपने माउस को पीटने में कई घंटे लगा दिए।
viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1020');(बस कुछ संदर्भ के लिए: मैं इसे कुछ हद तक ड्रुपल इंस्टेंस में डाल रहा हूँ ... इसलिए मेरे पास सिर क्षेत्र तक सीधी पहुंच नहीं है और जावास्क्रिप्ट का उपयोग करने की आवश्यकता है)