स्मार्ट फोन पर असंगत फ़ॉन्ट आकार

Question

मैं एक वेब पेज tweaking कर रहा हूँ ताकि यह स्मार्ट फोन पर अच्छा लगे। मैंने सीएसएस फ़ाइल में @media सेक्शन घोषित कर दिया है, इसलिए मैं इस पेज के फ़ॉन्ट आकार निर्दिष्ट कर सकता हूं। यहां मीडिया अनुभाग है:

@media screen and (max-device-width: 640px) { 
    #TermsOfUse { 
     padding: 0 2em 0 2em; 
     margin-left: auto; 
     margin-right: auto; 
     color: #777; 
     font: small sans-serif; 
    } 

    #TermsOfUse p { 
     color: #777; 
     font-weight: bold; 
     font: small sans-serif; 
     padding-top: 1em; 
     padding-bottom: 1em; 
    } 

    #TermsOfUse #trademark_footer p { 
     font: xx-large sans-serif; 
    } 
} 

हालांकि, फ़ॉन्ट आकार असंगत रूप से दिखाई दे रहे हैं। मैंने इसे फ़ॉन्ट्स को "छोटा" दिखाने के लिए कहा है, लेकिन एक सेक्शन फोंट को बहुत छोटे आकार में दिखाता है (आईडी = "ट्रेडमार्क_फुटर" नीचे)। "Xx-big" का उपयोग करने से पृष्ठ को शेष पृष्ठ में "छोटे" फ़ॉन्ट के रूप में बड़ा भी नहीं बनाया जाता है। मैं एंड्रॉइड पर क्रोम में पेज देख रहा हूं।

साथ ही, जब मैं इस पृष्ठ को निम्नलिखित सिम्युलेटर में देखता हूं, तो पूरे पृष्ठ पर सभी फ़ॉन्ट पढ़ने के लिए बहुत छोटे होते हैं।

http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy

सबसे पहले, क्यों पृष्ठ के तल पर ट्रेडमार्क में फ़ॉन्ट को दिखा रहा है इतना पेज (Android पर Chrome) के बाकी पर फोंट की तुलना में छोटे?

दूसरा, आईफोन सिम्युलेटर में सभी फोंट इतने छोटे क्यों दिख रहे हैं?

मैं जो कुछ भी पूरा करने की कोशिश कर रहा हूं वह सभी स्मार्ट फोनों पर सभी फ़ॉन्ट्स को एक सुस्पष्ट आकार में दिखाने के लिए है।

अद्यतन:

जब मैं फ़ॉन्ट आकार स्पष्ट रूप से निर्दिष्ट, मैं एक ही समस्या है। यदि मैं 13px निर्दिष्ट करता हूं, उदाहरण के लिए, प्राथमिक फ़ॉन्ट के लिए, मुझे ट्रेडमार्क पर लगभग 30px को समान आकार में प्रदर्शित करने के लिए कुछ निर्दिष्ट करना होगा।

वही बात अगर मैं "em" का उपयोग करता हूं।

अद्यतन:

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

इस की कोशिश की और यह एक फर्क नहीं लगता था:

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

Answer 1

मुझे लगता है कि पृष्ठ के स्रोत पर एक नज़र किया है और मैं

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

नहीं देख सकता था

जब मैंने अपने आईफोन को देखा तो यह पृष्ठ को स्केल नहीं कर रहा था, यह सुझाव देता है कि डिवाइस पेज के आकार की व्याख्या कर रहा है और इस तरह के मीडिया प्रश्नों में से कोई भी प्रभावी नहीं होगा।

व्यूपोर्ट मेटा टैग जोड़ना मीडिया प्रश्नों और फ़ॉन्ट परिवर्तनों को ट्रिगर करना चाहिए जो आप खोज रहे हैं।

info on the viewport tag

Answer 2

यह एक लंबा शॉट है, लेकिन इसे आप थोड़ा मदद मिल सकती है।

मैंने एक आईफोन 4 (आईओएस 5.0.1) के साथ http://inrix.com/traffic/Privacy खोला है और वास्तव में फ़ॉन्ट वास्तव में छोटा है।

इस page के @media एस पर एक नज़र डालें (आप HTML5 Boilerplate's template भी देख सकते हैं कि आप अपनी समस्या के बारे में कुछ भी खोदने में सक्षम हो सकते हैं)। मेरे पास कोई फ़ॉन्ट-साइज समस्या नहीं है और मैंने क्रोम (संस्करण 26.0.1410.64 मीटर), आईओएस 5.0.1 (9 ए405) और एंड्रॉइड 2.3.6 पर दोनों ओरिएंटेशन (फोन में) पर पिछले लिंक का परीक्षण किया है। । शायद आप उन @media एस से कुछ खोद सकते हैं।

मैं Vector's answerYou should specify sizes when you want consistency के साथ अधिक सहमत नहीं हो सका, आपको स्थिरता की आवश्यकता होने पर नामों से बचना चाहिए।

• How we learned to leave default font-size alone and embrace the em:

  अंत में यहाँ अधिक जानकारी के लिए कुछ लिंक हैं।

• Responsive Design with CSS3 Media Queries।

अन्त में एक वैकल्पिक विकल्प आप डाउनलोड करने और अपने सीएसएस में एक font एम्बेड कर सकता है के रूप में:

@font-face { 
    font-family: 'LiberationMonoRegular'; 
    src: url('fonts/LiberationMono-Regular-webfont.woff') format('woff'), 
     url('fonts/LiberationMono-Regular-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; } 

फिर अपने फिर सेट करता है में सिर्फ अपने फ़ॉन्ट का उपयोग:

* { padding: 0; margin: 0; font-family: "LiberationMonoRegular", Verdana, Tahoma; } 

आशा है कि यह मदद करता है!

Answer 3

लाइन-ऊंचाई सेट करने के बारे में क्या?

मुझे विभिन्न वेबब्रोसर के माध्यम से एक ही समस्या थी जहां फोंट की अलग-अलग स्थितियां थीं। मैं इसे height और line-height सेट करके हल कर सकता हूं।