यदि आप एक वेब-डिज़ाइनर हैं, जिसे बग के रूप में जाना जाता हैव्यूप्लेस स्केलिंग ने आपका सामना किया हो सकता है जो कि Apple डिवाइसों यानी iPod, iPhone और iPad में होता है। कभी-कभी, जब हम अपने ऐप्पल डिवाइस को पोर्ट्रेट से लैंडस्केप ओरिएंटेशन के लिए घुमाते हैं, तो साइट ज़ोम्स हो जाती है, जिससे हमें डिवाइस-चौड़ाई से बड़ी चौड़ाई का दृश्य दिखाई देता है। ऐसा इसलिए है क्योंकि डिज़ाइनर ने व्यूपोर्ट चौड़ाई को डिवाइस की चौड़ाई पर सेट किया है। आपको यह पता लगाने में मदद करने के लिए कि यह बग कैसे काम करता है, हमने एक नमूना पृष्ठ डिज़ाइन किया और हमारे iPad को चित्र से परिदृश्य दृश्य तक घुमाया।
कहा बग के लिए एक त्वरित फिक्स हमें सेट करने के लिए मार्गदर्शन करता हैव्यूपोर्ट मेटा टैग में = अधिकतम-स्केल = 1 ’। यह समय के लिए समस्या को ठीक करता है लेकिन पृष्ठ अब ज़ूम-सक्षम नहीं है क्योंकि हम डिवाइस-चौड़ाई के समान अधिकतम चौड़ाई को ठीक करते हैं।
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
यह त्वरित सुधार बिल्कुल सही समाधान नहीं है। @Mathias, @cheeaun और @jdalton जैसे डिजाइनरों की कड़ी मेहनत के माध्यम से, अब हमारे पास एक जावास्क्रिप्ट है जिसे स्थायी समाधान प्राप्त करने के लिए <head> अनुभाग में जोड़ा जा सकता है। इस समाधान के तहत, पृष्ठ ज़ूम-सक्षम रहेगा।
<script type="text/javascript">
(function(doc) {
var addEvent = "addEventListener",
type = "gesturestart",
qsa = "querySelectorAll",
scales = [1, 1],
meta = qsa in doc ? doc[qsa]("meta[name=viewport]") : [];
function fix() {
meta.content = "width=device-width,minimum-scale=" + scales[0] + ",maximum-scale=" + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>ये एकमात्र ज्ञात समाधान हैं जो डिजाइनर अब तक साथ आए हैं। लेकिन अगर आपके पास इस बग को ठीक करने के लिए एक और है, तो इसे टिप्पणियों में हमारे साथ साझा करें।
टिप्पणियाँ