ज़ूम करते समय भी मोबाइल ब्राउज़र पर तरल रेखा ब्रेक कैसे प्राप्त कर सकता हूं?ज़ूम करते समय भी मोबाइल ब्राउज़र पर तरल रेखा ब्रेक कैसे प्राप्त कर सकता हूं?
मेरे पास टेक्स्ट का केवल एक कॉलम वाला एक बहुत ही सरल वेब पेज है।
/* ✂---------------- */
body {
/* To avoid problems with some older browsers, that do not calculate
* relative values correctly without this statement. */
font-size: 100%;
/* ✂---------------- */
/* Center the content and leave a margin at the left and at the right. */
margin-left: auto;
margin-right: auto;
/* ✂---------------- */
}
/* ✂---------------- */
@media not print {
body {
/* ✂---------------- */
/* Do not put too many words in a single line: */
width: 41em;
/* Avoid horizontal scrolling, and leave a small margi
* at the left and at the right. */
max-width: 90%;
}
/* ✂---------------- */
}
/* ✂---------------- */
उद्देश्य है:: यहाँ सीएसएस के प्रासंगिक भागों हैं
नहीं तय फ़ॉन्ट आकार का उपयोग लेकिन डिफ़ॉल्ट फ़ॉन्ट आकार का सम्मान करते हैं कि उपयोगकर्ता अपने ब्राउज़र
की सेटिंग में चुना गया हैयदि ब्राउज़र विंडो की चौड़ाई बहुत बड़ी है, तो लाइनों को बहुत व्यापक (बहुत सारे वर्ण) न बनाएं। इसके बजाए, बाईं ओर और दाईं तरफ स्थान छोड़ दें।
यदि ब्राउज़र विंडो की चौड़ाई छोटी है (= मौजूदा ज़ूम स्तर पर वर्तमान फ़ॉन्ट आकार में टेक्स्ट के 41em को दिखाने के लिए पर्याप्त जगह नहीं है), तो ब्राउज़र विंडो की पूरी चौड़ाई के लिए लाइन ब्रेक का उपयोग करें (क्षैतिज स्क्रॉलिंग से परहेज करते हुए, बाएं और दाईं तरफ ÷ 2 = 5% (100% -90%) के छोटे मार्जिन के साथ।
यदि उपयोगकर्ता ज़ूम इन या ज़ूम आउट करता है, तो लाइन ब्रेक सही ढंग से अनुकूलित हो जाता है। तो जब उपयोगकर्ता वास्तव में ज़ूम करता है, तब भी कोई क्षैतिज स्क्रॉलिंग आवश्यक नहीं होती है क्योंकि रेखा की लंबाई ब्राउज़र विंडो से अधिक व्यापक नहीं होती है।
यह डेस्कटॉप ब्राउज़र पर ठीक काम करता है। लेकिन मोबाइल ब्राउज़र व्यूपोर्ट के बारे में झूठ बोलते हैं। वे असली ब्राउज़र विंडो चौड़ाई के बजाय लगभग आठ सौ पिक्सल का व्यूपोर्ट करने का दावा करते हैं (यह "लेआउट व्यूपोर्ट" है - वास्तविक "दृश्य व्यूपोर्ट" से अलग - विवरण के लिए http://www.quirksmode.org/mobile/viewports2.html देखें)। तो, मोबाइल ब्राउज़र के लिए, मैं HTML में <"viewport" content="width=device-width, initial-scale=1"/> और
@viewport {
/* 100% of viewport’s width */
width: 100vw;
zoom: 1.0;
}
सीएसएस में जोड़ दिया है। अब, फ़ायरफ़ॉक्स मोबाइल पर लक्ष्य # 1, 2 और 3 कार्य भी करें। लेकिन लक्ष्य # 4 नहीं है। ज़ूम इन या ज़ूम आउट करते समय हालिया फ़ायरफ़ॉक्स मोबाइल पर लाइन ब्रेक नहीं बदला जाता है। (मजेदार तथ्य: मेरे पुराने एंड्रॉइड 2.3.6 मानक ब्राउज़र पर, यह काम करता है।) मुझे लगता है कि <meta> टैग पढ़ने के बाद मोबाइल ब्राउज़र पर लेआउट व्यूपोर्ट चौड़ाई निर्धारित की जाती है और यह लेआउट व्यूपोर्ट की सीएसएस पिक्सेल चौड़ाई और नहीं बदलती है उपयोगकर्ता ज़ूम करता है या ज़ूम आउट करता है (डेस्कटॉप ब्राउज़र का विरोध करता है, जो ज़ूमिंग करते समय अपना व्यूपोर्ट अपनाता है)। चूंकि max-width: 90%; व्यूपोर्ट के सापेक्ष है (क्योंकि यह आसपास के कंटेनर है), ज़ूम इन या ज़ूम आउट करते समय लाइन ब्रेक और नहीं बदलता है। http://ryanve.com/lab/dimensions/ आज़माएं जो जावास्क्रिप्ट का उपयोग करके कुछ डोम मान प्रदर्शित करता है। जब आप डेस्कटॉप ब्राउज़र पर इस साइट को चलाते हैं, तो आप देखते हैं कि window.innerWidth जब आप ज़ूम इन करते हैं या ज़ूम आउट करते हैं तो बदलते हैं। यदि आप मोबाइल ब्राउज़र पर एक ही काम करते हैं, तो window.innerWidth का मान ज़ूम इन या आउट करते समय नहीं बदलता है। जहां तक मैं देखता हूं, यह व्यवहार सामान्य रूप से आधुनिक मोबाइल ब्राउज़र और मोबाइल वेब पृष्ठों पर मानक व्यवहार भी प्रतीत होता है। ऐसा लगता है कि मोबाइल ब्रॉवर्स के डेवलपर्स का एक जानबूझकर choise (वे पुराने, डेस्कटॉप-अनुकूलित गैर-उत्तरदायी वेब पेज भी दिखाने में सक्षम होना चाहते हैं), लेकिन नकारात्मक बात यह है कि आप केवल वर्चुअल "लेआउट व्यूपोर्ट के साथ काम कर सकते हैं "।
और जहां तक मुझे पता है, सीएसएस में कोई माप इकाइयां नहीं हैं जो आभासी "लेआउट व्यूपोर्ट" के बजाय वास्तविक "दृश्य व्यूपोर्ट" आकार के सापेक्ष हैं।
तो मेरी प्रश्न हैं:
मुझे आश्चर्य है कि अगर कोई साफ है और है एक वेब पेज इस (ज़ूम + द्रव लाइन ब्रेक) पाने के लिए सब पर मानक के अनुरूप संभावना सिर्फ जैसे मोबाइल ब्राउज़र पर काम कर डेस्कटॉप संस्करण पर?
यदि ऐसी संभावना है, तो यह कैसे काम कर सकता है (जावास्क्रिप्ट के बिना पसंदीदा)? मोबाइल दृश्यों पर "दृश्य व्यूपोर्ट चौड़ाई" ÷ "स्क्रीन चौड़ाई" की गणना करके ज़ूम कारक (जो स्वयं मुझे जेएस में क्रॉस-ब्राउजर तक पहुंच योग्य नहीं है) का अनुमान लगाने वाला एक गंदा हैक है और तदनुसार व्यूपोर्ट को गोद लेता है?
अनौपचारिक रूप से यह या तो काम नहीं करता है। मेरे अपने कोड के साथ ही परिणाम: डेस्कटॉप ब्राउज़र पर ठीक काम करता है, लेकिन तरल रेखा ब्रेक फ़ायरफ़ॉक्स मोबाइल पर काम नहीं करता है। –