Android पर Chrome फ़ॉन्ट का आकार बदलता है

84

एक बार पाठ का पैराग्राफ एक निश्चित लंबाई तक पहुँच जाता है, Android पर Google Chrome पाठ का आकार बदलने और इसे बड़ा करने का निर्णय लेता है (जिससे सभी प्रकार के मज़े होते हैं)। अब मेरे पास एक वेबसाइट है जहाँ लगभग आधे p-टैग मेरे द्वारा निर्धारित आकार का अनुसरण करते हैं और अन्य आधे परिवर्तन जैसे वे कृपया करते हैं - जाहिरा तौर पर पैराग्राफ की लंबाई के आधार पर।

मैं इसे कैसे ठीक करूं?

— Sprax
स्रोत

1

आपके पास कोई उदाहरण है? इसके अलावा, कौन सा Android और Chrome संस्करण?

— 21

93

max-height: 999999px;उस तत्व में जोड़ें , जिस पर आप फ़ॉन्ट बूस्टिंग या उसके अभिभावक को रोकना चाहते हैं।

— moeffju
स्रोत

13

एंड्रॉइड क्रोम केवल गतिशील ऊंचाई वाले तत्वों को फ़ॉन्ट बूस्टिंग लागू करता है। जैसे ही आप एक ऊँचाई या अधिकतम ऊँचाई निर्दिष्ट करते हैं, फॉन्ट बूस्टिंग लागू नहीं होता है। एक बड़ी संख्या के लिए अधिकतम ऊंचाई निर्धारित करना सरल है और इसका कोई दुष्प्रभाव नहीं होना चाहिए।

— मोफ्फू

1

बस इसके लिए एक चेतावनी। यह एंड्रॉइड पर क्रोम फोंट के साथ समस्या को हल करता है जो अच्छा नहीं खेल रहा है। हालांकि इसने आईओएस के विशिष्ट संस्करणों पर साइट के आईपैड दृश्य को तोड़ दिया।

— जेम्स मैकडॉनेल 20

साथ ही यह css3 संक्रमण के लिए ipad पर कुछ मुद्दों का कारण बना।

— जेम्स मैकडोनेल

4

इसका उपयोग करने से सफारी (5.1.7) में कई तत्वों का लेआउट टूट जाता है, भले ही आप अधिकतम ऊंचाई या परिभाषित ऊंचाइयों का उपयोग शुरू करने के लिए नहीं कर रहे हों। कुछ साइटें पूरी तरह से अनुपयोगी थीं, सभी संरचनात्मक divतत्व पृष्ठ के शीर्ष पर अजीब तरह से ढह गए थे। अधिकतम ऊंचाई वाली अपनी साइट को "कंबल" न दें! जहां जरूरत हो, वहीं इस्तेमाल करें और अच्छी तरह से परखें।

— रेडली सस्टेयर

2

Whelp ... बस जब मैंने सोचा कि मैं यह सब देखा है ... एक और पागल गड़बड़ एक और पागल तय के साथ। FWIW मैं सफारी में किसी भी मुद्दे को नहीं देख रहा हूं, और min-height: 1pxदुर्भाग्य से इसका कोई प्रभाव नहीं था। max-height: 999999pxहालांकि चाल है। मार्ग प्रविष्टि / अवकाश के दौरान संक्रमण के कारण मेरा मामला बहुत लंबा था। संक्रमण के दौरान या उसके ठीक बाद फॉन्ट बूस्टिंग हुआ, जो निश्चित नहीं है, लेकिन यह बहुत ही ध्यान देने योग्य बदलाव का कारण बना।

— चेस

60

<meta>दस्तावेज़ में निम्नलिखित टैग शामिल करें <head>:

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

यह दृश्य फ़्रेम को सही ढंग से स्थापित करेगा, और इस तरह "FontBoosting" की आवश्यकता को समाप्त करेगा।

— जो देवरोज
स्रोत

6

यह निश्चित रूप से पसंदीदा समाधान है। यदि आप इस बात की परवाह करते हैं कि मोबाइल में चीजें कैसे दिखती हैं, तो अपने व्यूपोर्ट का स्वामित्व लें!

— पॉल आयरिश

17

यह फ़ॉन्ट बूस्टिंग को अक्षम नहीं करता है, हालांकि।

— एड हिंचलिफ

1

यह निश्चित रूप से अवांछित स्केलिंग को सही करता है और मैं भविष्य में इसका उपयोग करने जा रहा हूं।

— 22

5

एक नोट के रूप में, मेरे पास है <meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">और मैं अभी भी Chromes भयानक स्केलिंग प्राप्त कर रहा हूं

— सैम

यह बेहतर है क्योंकि फ़ॉन्ट सुपाठ्य है। यह सुपाठ्यता के लिए आकार में वृद्धि करते हुए अनुपात बनाए रखता है। मेरे लिए सही है।

— जेनिफर मिशेल

23

अब एक सीएसएस संपत्ति है जिसे आप इसे नियंत्रित करने के लिए सेट कर सकते हैं:

-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;

Https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust देखें

— गैरेथ
स्रोत

टेक्स्ट-साइज-एडजस्ट: किसी ने भी मेरे लिए नवीनतम एंड्रॉइड क्रोम पर काम नहीं किया।

— Stepan Yakovenko

यह पसंदीदा समाधान है यदि आप वेब ऐप के रूप में तैनात गैस का उपयोग कर रहे हैं।

— JPP

यह मेरे लिए काम नहीं करता है लेकिन अधिकतम ऊंचाई करता है।

— रेडेंको ज़ेक

15

इसे अपने रीसेट में रखें। html * {max-height:1000000px;}

— एड हिंचलिफ़
स्रोत

चिपचिपा पाद लेख के लिए मेरे साथ समस्या पैदा कर रहा था, html शरीर * करना था

— सबरीना लेगट

यह थोड़ा बहुत आक्रामक है, जब तक कि आप वास्तव में कई अप्रत्याशित तत्वों में एक समस्या का सामना नहीं कर रहे हैं। अन्यथा केवल समस्या तत्वों को लक्षित करना बेहतर होगा।

— चेस

1

@ देखें - मेरे मामले में वे अप्रत्याशित (गतिशील) तत्व थे, इसलिए हमें एक *दृष्टिकोण का उपयोग करना पड़ा । उस ने कहा, मैं तर्क देता हूं कि यह उन अस्पष्ट चीजों में से एक है, जिनके बारे में आप शायद भूल जाएंगे और भविष्य में समस्याएं पैदा कर सकते हैं, इसलिए स्थिरता के लिए, मैंने शायद इसे छोड़ दिया था, *भले ही उस समय यह सिर्फ एक / एक था कुछ तत्व।

— एड हिंचलिफ़

जब मैंने इस सूत्र को पाया और टिप्पणी की, तो मुझे अतिरिक्त समस्याएं दिखाई देने लगीं, जिन पर मुझे संदेह था कि वे फॉन्ट बूस्टिंग से संबंधित हैं। इसलिए, निश्चित रूप से पर्याप्त (अब के लिए कम से कम) * max-height...मेरे कोड में एक है LOL

— चेस

6

कुछ परीक्षणों के बाद इस नियम ने मेरी मदद की। बढ़े हुए पाठ वाले तत्व में या तो जोड़ा जाना चाहिए या यह div / तालिका संरचना के आधार पर माता-पिता है।

element or parent element { 
    /* prevent font boosting on mobile devices */
    width: 100%;
    height: auto;
    min-height: 1px;
    max-height: 999999px;
}

हो सकता है कि आपकी आवश्यकताओं के अनुसार चौड़ाई और हीग मूल्यों को सही किया जाना चाहिए।

— metamagikum
स्रोत

2

मुझे अपने पृष्ठों के लिए एक समाधान मिला: मूल तत्व को एक चौड़ाई और ऊंचाई दें! फ़ॉन्ट उन सीमाओं के बाहर नहीं जाएगा, और इसलिए यह छोटा (एर) रहेगा।

— रैंडी व्रोगोप
स्रोत

1

इसे "फ़ॉन्ट बूस्टिंग" कहा जाता है और इस वेबकिट बग में कुछ विस्तार से वर्णित किया गया है । वर्तमान में इसे अक्षम करने का कोई तरीका नहीं है।

— बोरिस स्मस
स्रोत

ऐसा लगता है कि यह वास्तव में फ़ॉन्ट बूस्टिंग है, लेकिन इसे max-height: 999999px@moeffju वर्णित के रूप में सेट करके रोका जा सकता है ।

— चेस