कस्टम चौड़ाई को अनदेखा करने वाला व्यूपोर्ट

मैं व्यूपोर्ट के साथ खेल रहा हूं और 520 की चौड़ाई करने की कोशिश की, लेकिन ऐसा लगता है कि इसके बजाय डिवाइस-चौड़ाई है। कोई विचार?कस्टम चौड़ाई को अनदेखा करने वाला व्यूपोर्ट

<html> 
<head> 
<meta name="viewport" content="width=520, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<style type="text/css"> 
h1 
{ 
    width: 980px; 
    border: 1px solid red; 
} 

h2 
{ 
    width: 520px; 
    border: 1px solid green; 
} 

h3 
{ 
    width: 320px; 
    border: 1px solid green; 
} 

</style> 
</head> 

<body> 
<h1>I am a big heading 980px wide. Yes I am</h1> 
<h2>I am a big heading 520px wide. Yes I am</h2> 
<h3>I am a big heading 320 wide. Yes I am</h3> 
</body>

स्रोत

2013-07-12 Chris Muench

क्या आपने [इस महान लेख] को पढ़ा है (http://www.quirksmode.org/mobile/viewports2.html) यह बताते हुए कि मोबाइल व्यूपोर्ट्स के लिए पिक्सेल का क्या अर्थ है? –

क्या आपके लिए 'DOCTYPE' सेट न करने का कोई विशेष कारण है? –

प्रारंभिक या अधिकतम पैमाने निर्धारित करने वाले पृष्ठों के लिए, इसका मतलब है कि चौड़ाई संपत्ति वास्तव में न्यूनतम व्यूपोर्ट चौड़ाई में अनुवाद करती है। उदाहरण के लिए, यदि आपके लेआउट को कम से कम 500 पिक्सल चौड़ाई की आवश्यकता है तो आप निम्न मार्कअप का उपयोग कर सकते हैं। जब स्क्रीन 500 से अधिक पिक्सेल चौड़ी है, ब्राउज़र व्यूपोर्ट का विस्तार होगा (बजाय में ज़ूम) स्क्रीन फिट करने के लिए:

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

यह इस LINK से निकाला गया था।

तो मुझे लगता है कि आपके मामले में भी जब आपने HTML टैग चौड़ाई 520px से अधिक सेट की है, तो ब्राउज़र 520px चौड़ाई को न्यूनतम मात्रा के रूप में 5umpx चौड़ाई ले रहा है और बड़े टैग को प्रस्तुत करने के लिए ऊपर से ऊपर काम कर रहा है।

स्रोत

2013-07-22 11:30:43 AnaMaria

This article जो बताते हैं कि content="initial-scale=1, maximum-scale=1, user-scalable=no" मुद्दा है लगता है, और आप एक निश्चित व्यूपोर्ट वे छोड़ दिया जाना चाहिए बनाने के लिए कोशिश कर रहे हैं कि।

मुझे इसे स्वयं परीक्षण करने का मौका नहीं मिला है, लेकिन तर्क ध्वनि लगता है।

उम्मीद है कि मदद करता है।

स्रोत

2013-07-19 13:50:22

चौड़ाई के लिए व्यूपोर्ट मेटा टैग पर भरोसा करना मुश्किल है। this article बताते हैं के रूप में:

कभी कभी औपचारिक screen.width ज्यादा मतलब नहीं है क्योंकि पिक्सेल गणना सिर्फ बहुत अधिक है। उदाहरण के लिए, नेक्सस वन की औपचारिक चौड़ाई 480 पीएक्स है, लेकिन Google इंजीनियरों ने निर्णय लिया है कि डिवाइस-चौड़ाई का उपयोग करते समय लेआउट व्यूपोर्ट 480px की चौड़ाई देकर बहुत अधिक है। उन्होंने इसे 2/3 तक घटा दिया, ताकि डिवाइस-चौड़ाई आपको आईफोन पर 320px की चौड़ाई दे।

उन 320 पीएक्स "सीएसएस पिक्सेल" हैं, जिसका अर्थ है कि 320 पिक्सल व्यूपोर्ट की चौड़ाई है, इससे कोई फर्क नहीं पड़ता कि डिवाइस या दस्तावेज़ वास्तव में कितना व्यापक है।

यदि आप फोन के वास्तविक आकार की तुलना में चौड़ाई (या छोटी) निर्दिष्ट कर रहे हैं और स्केल को सीमित कर रहे हैं, तो आपको समस्याएं होंगी। ब्राउज़र को डिवाइस को फिट करने के लिए पेज को स्केल करने की अनुमति देने के लिए initial-scale=1, maximum-scale=1, को निकालने का प्रयास करें। आप अभी भी user-scalable=no और width=520 रख सकते हैं।

स्रोत

2013-07-19 14:00:19 Mooseman

-1

आपका हैडर टैग (एच 1, एच 2, एच 3) चौड़ाई क्रमशः 980 पीएक्स, 520 पीएक्स और 320 पीएक्स है। आपके हेडर टैग में कठोर कोडिंग चौड़ाई है इसलिए डिवाइस की चौड़ाई कभी भी होगी लेकिन आपकी हेडर टैग चौड़ाई समान होगी और नहीं उत्तरदायी। मुझे लगता है कि पिक्सेल में चौड़ाई प्रदान करने के बजाय आप% में चौड़ाई का उपयोग क्यों नहीं करते हैं। और आप हेडर टैग को एक कंटेनर में भी डाल सकते हैं जिसे कंटेनर position:relative बनाया गया है, भले ही आप अपने व्यक्ति हेडर टैग के सापेक्ष बना सकें।

स्रोत

2013-07-22 10:58:49

कस्टम चौड़ाई को अनदेखा करने वाला व्यूपोर्ट

उत्तर

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