बड़ी स्क्रीन पर फ़ायरफ़ॉक्स बनाम क्रोम में साइट आकार को ठीक करना

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

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

अब समस्या: मैं इन विभिन्न ब्राउज़रों में मिलान करने के लिए अपनी वेबसाइटों का आकार कैसे प्राप्त करूं? मेरे 1920x1080 डिस्प्ले पर अंतर लगभग 20% है (आपको अन्य ब्राउज़रों में दृश्य से मिलान करने के लिए सामान्य आकार के लगभग 120% में वेबकिट ब्राउज़र ज़ूम करना होगा)

क्या कुछ सीएसएस हैक @viewport या किसी अन्य तरीके से दुरुपयोग कर रहा है यह सुनिश्चित करने के लिए कि पृष्ठ ब्राउज़र पर समान दिखता है?

स्रोत

2014-04-17 Qqwy

यह हो सकता है कि आप बस मेटा व्यूपोर्ट टैग '<मेटा नाम =" व्यूपोर्ट "सामग्री =" चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1.0 "> के लिए देख रहे हैं '? – Netsurfer

दुर्भाग्य से, यह नहीं है। यह समस्या का समाधान नहीं करता है (हालांकि यह मोबाइल उपकरणों पर इस से संबंधित अन्य समस्याओं के साथ मदद करता है) – Qqwy

एकमात्र 'समाधान' मैंने पाया है कि अब तक काम कर सकता है सभी पिक्सेल मानों को सापेक्ष मूल्यों (जैसे प्रतिशत या एम) में बदलना है। , और कुछ @media स्क्रीन स्थितियों में शरीर को किसी अन्य आकार में आकार दें – Qqwy

अपने <head> टैग

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

भीतर इस मेटा टैग जोड़ने का प्रयास करें सभी ब्राउज़रों भर में लगातार व्यवहार पाने के लिए प्रयास करने के लिए एक सीएसएस रीसेट का प्रयोग करें।

http://meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com/yui/reset/

इकाइयों में रिश्तेदार फ़ॉन्ट आकार का उपयोग करते हुए इस तरह के उन्हें 'या'% 'के रूप में एक और उपाय है।

स्रोत

2014-04-22 11:20:37

यह साइट को विभिन्न मोबाइल उपकरणों पर समान दिखने में मदद करता है, लेकिन इससे मदद नहीं मिलती है डेस्कटॉप, जो इस मुद्दे का लक्ष्य मंच है। – Qqwy

@Qqwy मैंने अपना जवाब संपादित किया है। समाधान का प्रयास करें। –

ठीक है, तो आप पहले से ही मान लिया व्यूपोर्ट

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

का उपयोग जोड़ने के अपने सीएसएस के लिए निम्न:

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

भी देखें MDN - text-size-adjust

स्रोत

2014-04-22 14:57:29 Netsurfer

मैं वर्तमान में एक की जरूरत नहीं है हायडीपीआई परीक्षण के साथ प्रदर्शित करता है, हालांकि यहां मैं प्रस्तावित करता हूं:

आपने सापेक्ष इकाइयों का उपयोग करने का उल्लेख किया है, जो मुझे लगता है कि एक अच्छा विचार है। दूसरों की तरह उल्लेख किया गया है, अपनी चौड़ाई निर्धारित करने के लिए मेटा व्यूपोर्ट टैग का उपयोग करना भी एक अच्छा विचार है: <meta name="viewport" content="width=device-width, initial-scale=1">।

मैं जो जोड़ूं वह अलग-अलग पिक्सेल घनत्व के लिए मीडिया प्रश्न है। उदाहरण के लिए, मैं वर्तमान में अपनी परियोजनाओं में से एक में इसका उपयोग कर रहा हूं:

@media 
only screen and (-webkit-min-device-pixel-ratio: 1.3), 
only screen and (-o-min-device-pixel-ratio: 13/10), 
only screen and (min-resolution: 120dpi) { 
    /* style here */ 
}

आप इसे पूर्ण चौड़ाई प्रश्नों के साथ भी जोड़ सकते हैं।

कुछ संदर्भों:

... या आप पर एक max-width इस्तेमाल कर सकते हैं अपने body

स्रोत

2014-04-23 17:24:51 Daze

बड़ी स्क्रीन पर फ़ायरफ़ॉक्स बनाम क्रोम में साइट आकार को ठीक करना

उत्तर

संबंधित मुद्दे