में निश्चित चौड़ाई प्रतिपादन के साथ डिव मैं आईपैड के लिए अपने पृष्ठों में से एक को अनुकूलित करने की कोशिश कर रहा हूं। आप यहां मेरा टेस्ट पेज देख सकते हैं: http://demo.dennismadsen.com/ipad/आईपैड
इसमें 800px की चौड़ाई वाला एक काला बॉक्स है। जब मैं अपने आईपैड पर यह देख सकते हैं और एक screenshow लेते हैं, मैं देख सकता हूँ, कि बॉक्स अधिक जब 800px चौड़ाई है - के बारे में 837px: http://demo.dennismadsen.com/ipad/screenshot.png
मैं सोच रहा हूँ क्यों यह हो रहा है?
आपकी वेबसाइट और उसके तत्वों की वास्तविक चौड़ाई के बावजूद, आईओएस डिवाइस इष्टतम देखने के लिए आपकी सामग्री को स्केल करने का प्रयास करेंगे।
बंद करो कि आपके HTML शीर्षक में इस रखकर हो रहा:
<meta name="viewport" content="initial-scale=1.0;">
मैं आमतौर पर इस '<मेटा सामग्री = "प्रारंभिक-पैमाने = 1.0 का उपयोग करता हूं; अधिकतम-स्केल = 1.0; उपयोगकर्ता-स्केलेबल = 0;" नाम = "व्यूपोर्ट"> 'जो दृश्य को 1.0 स्केल पर लॉक करता है, और उपयोगकर्ता ज़ूम करने योग्य नहीं है। –
@ स्क्वीजी ट्रू, लेकिन आईओएस उपयोगकर्ता चुटकी-ज़ूम करने में सक्षम होने की उम्मीद करते हैं, इसलिए मैं नियमित रूप से डेवलपर्स को उस कार्यक्षमता को अक्षम करने की सलाह नहीं देता जब तक कि यह एक विशिष्ट आवश्यकता न हो। – Kalessin
निर्भर करता है। यदि आप मूल शैली इंटरफ़ेस पेश कर रहे हैं, तो यह वेबव्यू में दिखाया जाता है, तो लोग उम्मीद नहीं करेंगे कि यह वेबव्यू की तरह व्यवहार करे। और यह आप डिवाइस पर पिक्सेल को सही फिट करने के लिए डिज़ाइन कर रहे हैं, ज़ूमिंग की अनुमति देने के लिए बहुत अधिक लाभ नहीं है। –
<title> -tag ऊपर <meta> -tag जहां अधिकतम चौड़ाई और न्यूनतम-चौड़ाई के लिए इस कोड को परिभाषित
उपयोग की जाँच करें:
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">
आईपैड ज़ूम इन की तरह फंकी सामान नहीं कर सकता, ज़ूम आउट? सुनिश्चित करें कि आपका प्रदर्शन 100% पर है। –