जब iPhone ओरिएंटेशन पोर्ट्रेट से परिदृश्य में बदलता है, तो HTML फ़ॉन्ट-आकार को संरक्षित करें

Question

मेरे पास एक मोबाइल वेब एप्लिकेशन है जिसमें एक अनियंत्रित सूची है जिसमें प्रत्येक ली के अंदर एक हाइपरलिंक के साथ कई सूचियाँ हैं:

... मेरा सवाल यह है कि मैं हाइपरलिंक्स को कैसे प्रारूपित कर सकता हूं ताकि वे iPhone पर देखे जाने पर आकार में परिवर्तन न करें, और चित्र से एक्सेलेरोमीटर स्विच -> परिदृश्य? अभी, मेरे पास हाइपरलिंक फ़ॉन्ट आकार 14px है, लेकिन जब परिदृश्य पर स्विच किया जाता है, तो यह 20px की तरह ऊपर उड़ जाता है। मैं चाहता हूं कि फ़ॉन्ट-आकार समान रहें। यहाँ कोड है:

ul li a
{
  font-size:14px;
  text-decoration: none;
  color: #cc9999;
}

<ul>
  <li id="home" class="active">
    <a href="home.html">HOME</a>
  </li>
  <li id="home" class="active">
    <a href="test.html">TEST</a>
  </li>
</ul>

Answer 1

आप -webkit-text-size-adjustसीएसएस संपत्ति के माध्यम से इस व्यवहार को अक्षम कर सकते हैं:

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

सफारी वेब कंटेंट गाइड में इस संपत्ति का उपयोग आगे वर्णित है ।

Comments

स्नोबोज़ोहन नोट्स के रूप में आप इसे डेस्कटॉप ब्राउज़र पर फ़ॉन्ट आकार बढ़ाने की क्षमता को संरक्षित करने के लिए परिदृश्य-विशिष्ट मीडिया क्वेरी में लपेट सकते हैं। यह आईओएस-लक्षित पृष्ठों पर आवश्यक नहीं है जहां चुटकी जूमिंग की परवाह किए बिना काम करेगा।

— मैट स्टीवंस

यह फीचर iOS6 में काम नहीं करता है। आप <meta content="viewport"मेटा टैग (नीचे देखें) का उपयोग करके भी कोशिश कर सकते हैं

— दान

डॉन 'टी काnone उपयोग करें , 100%इसके बजाय का उपयोग करें , कि आप चाहते हैं व्यवहार: blog.55minutes.com/2012/04/iphone-text-resizing

— fregante

इसके लिए धन्यवाद ... मैं यह पता लगाने की कोशिश कर रहा हूं कि परिदृश्य xD में फ़ॉन्ट-आकार के साथ क्या हो रहा था

— जेफ शेवर

@ bfred.it +1, मुझे लगता है कि यह इस परिवर्तन के साथ इस उत्तर को संपादित करना सार्थक होगा।

— मिंग

Answer 2

नोट: यदि आप उपयोग करते हैं

html {
    -webkit-text-size-adjust: none;
}

तब यह डिफ़ॉल्ट ब्राउज़र में ज़ूम व्यवहार को अक्षम कर देगा। एक बेहतर समाधान है:

html {
    -webkit-text-size-adjust: 100%;
}

यह डेस्कटॉप व्यवहार को बदले बिना iPhone / iPad व्यवहार को सही करता है।

Answer 3

-Webkit- पाठ-आकार-समायोजन का उपयोग करना: कोई नहीं; HTML पर सीधे सभी वेबकिट ब्राउज़र में टेक्स्ट को ज़ूम करने की क्षमता को तोड़ता है। आपको इसे iOS के लिए विशिष्ट मीडिया प्रश्नों के साथ संयोजित करना चाहिए। उदाहरण के लिए:

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: none;
     }
}

Comments

मजेदार रूप से पर्याप्त मुझे केवल मीडिया क्वेरी के अंदर -webkit संपत्ति डालकर काम करने के लिए मिला। धन्यवाद!

— ज़ुलाउज़

Answer 4

जैसा कि पहले उल्लेख किया गया था, सीएसएस नियम

 -webkit-text-size-adjust: none

अब आधुनिक उपकरणों में काम नहीं करता है।

सौभाग्य से, एक नया समाधान iOS5 और iOS6 के लिए आता है (: iOS7 के बारे में क्या कार्य करने की?) :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

आप , user-scalable=0चुटकी को बंद करने के लिए भी जोड़ सकते हैं , इसलिए आपकी वेबसाइट एक मूल ऐप की तरह व्यवहार करेगी। यदि आपका डिज़ाइन उपयोगकर्ता के ज़ोम्स को ब्रेक करता है, तो इसके बजाय इस मेटा टैग का उपयोग करें:

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

Comments

खैर, एक अच्छा सवाल यह है कि इस मेटा टैग में अल्पविराम या अर्धविराम विभाजक का उपयोग करना है या नहीं! लेकिन यह काम करता है :)

— दान

मुझे केवल <meta name="viewport" content="width=device-width, initial-scale=1.0">इसके प्रभावी होने की आवश्यकता है।

— फॉक्सिनी 9

@ फ़ॉक्सिननी: धन्यवाद, उत्तर को अपडेट किया। मुझे लगता है कि ये 2 पहले मेटा टैग शुरुआती iOS संस्करणों

— डेन

Answer 5

आप HTML शीर्षक में एक मेटा जोड़ सकते हैं:

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

Answer 6

आप CSS रीसेट का उपयोग करने का विकल्प भी चुन सकते हैं, जैसे कि normalize.css , जिसमें वही नियम शामिल होता है जो क्रेजीगिंगो अनुशंसा करता है:

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

जैसा कि आप देखते हैं, इसमें IE फोन के लिए एक विक्रेता विशिष्ट नियम भी शामिल है।

विभिन्न ब्राउज़रों में कार्यान्वयन के बारे में वर्तमान जानकारी के लिए , एमडीएन संदर्भ पृष्ठ देखें ।

Answer 7

नीचे दिया गया कोड मेरे लिए काम करता है।

html{-webkit-text-size-adjust: 100%;}

यदि यह काम नहीं करता है तो अपने ब्राउज़र कैश को साफ़ करने का प्रयास करें।

Answer 8

मार्च 2019 तक पाठ-आकार-समायोजन को मोबाइल ब्राउज़रों के बीच उचित समर्थन मिला है ।

body {
  text-size-adjust: none;
}

viewportमेटा टैग का उपयोग करने से पाठ के आकार के समायोजन पर कोई प्रभाव नहीं पड़ता है और सेटिंग user-scalable: no आईओएस सफारी में भी काम नहीं करती है ।

Answer 9

मेरे मामले में यह समस्या रही है क्योंकि मैंने width: 100%HTML टैग के लिए CSS विशेषता का उपयोग किया है input type="text"।

मैंने width60% का मूल्य बदल दिया और जोड़ दिया padding-right:38%।

input {
    padding-right: 38%;
    width: 60%;
}