आईपैड मेरी साइट स्केलिंग रहा है - मैं कैसे

Question

मेरे परीक्षण पृष्ठ पर है इसे ठीक करने नहीं जानता: http://dev.my-igloo.net/ps-rwd/

मैं मीडिया के प्रश्नों के आसपास मेरे सिर प्राप्त करने के लिए कोशिश कर रहा हूँ और साइट को बदलने के अनुसार चौड़ाई ब्राउज़र की चौड़ाई के लिए - साइट को आईपैड और आईफ़ोन पर काम करना है और फिलहाल मैं इसे आईपैड पर परीक्षण कर रहा हूं और थोड़ा पागल हो रहा हूं।

कृपया ध्यान दें कि साइट डिज़ाइन/लेआउट फिलहाल पूरा नहीं हुआ है क्योंकि मैं सबकुछ पूरा करने से पहले यहां प्रारंभिक सेटिंग्स के साथ काम कर रहा हूं। मैंने प्रत्येक स्टाइलशीट के लिए एक अलग पृष्ठभूमि रंग सेट किया है ताकि यह देखना आसान हो कि कौन सा लोड किया गया है।

मैं अपने सिर टैग में इस है:

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

और अगर मैं तो जैसे अपने मीडिया के प्रश्नों को सेट करें:

<!-- Main Stylesheet --> 
<link rel="stylesheet" type="text/css" href="ps-default.css" /> 

<!-- Main Stylesheet --> 
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 769px)" /> 
<!-- 768 wide screens --> 
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 481px) and (max-width: 768px)" /> 
<!-- 480 wide screens --> 
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 321px) and (max-width: 480px)" /> 

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

मैं इससे कैसे बच सकता हूं? मैंने सोचा था कि आरंभिक-स्केल 1.0 करने के लिए सेट होने से उस में ज़ूम किए बिना लोड होगा

मैं तो मेरे मीडिया बदल थोड़ा करने के लिए प्रश्नों:। लैंडस्केप मोड में

<!-- For Desktop Browsers --> 
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 1024px)" /> 
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 769px) and (max-width: 1024px)" /> 

<!-- 768 wide screens --> 
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (max-width: 768px) and (orientation:portrait)" /> 
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 481px) and (max-width: 767px) and (orientation:landscape)" /> 

<!-- 480 wide screens --> 
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (max-width: 480px) and (orientation:landscape)" /> 

और फिर आईपैड पर 768 स्टाइलशीट लोड किया गया था और पेज ज़ूम किया गया - मुझे समझ में नहीं आता कि मैं क्या गलत कर रहा हूं।

मुझे इस माध्यम से पढ़ा गया है: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193 और इस समस्या का समाधान नहीं मिला। मैंने कोशिश किए गए अन्य विकल्पों में न्यूनतम-स्तरीय और अधिकतम-पैमाने को शामिल करना है, लेकिन यह चुटकी-ज़ूम कार्यक्षमता लेता है जो वांछनीय नहीं है।

मैं अब मीडिया प्रश्नों के प्रारंभिक सेट पर वापस लौट आया हूं और आशा करता हूं कि कोई मेरी मदद कर सके।

Answer 1

जो मैं समझता हूं उससे, यह सफारी डिवाइस की चौड़ाई की गणना के तरीके के कारण एक समस्या का अधिक प्रतीत होता है। असल में सफारी हमेशा पोर्ट्रेट अभिविन्यास के आधार पर डिवाइस की चौड़ाई लेता है। इस प्रकार जब आप चौड़ाई = डिवाइस-चौड़ाई कहते हैं, यह हमेशा अभिविन्यास के बावजूद 768px के बराबर होता है।

इस प्रकार खुशी का क्या लगता है कि लैंडस्केप मोड में, आपकी 100% चौड़ाई 768px के रूप में गणना की जाती है, भले ही उपलब्ध चौड़ाई 1024px है। (मैं एक 1024px स्क्रीन पर 768 पीएक्स पेज प्रदर्शित कर रहा हूं जिसके परिणामस्वरूप खींचने या ज़ूमिंग हो रही है)।

जिस समाधान पर विचार किया जा सकता है वह निश्चित व्यूपोर्ट चौड़ाई दे रहा है।

<meta name="viewport" width="1024" /> 

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

Answer 2

परीक्षण की सुबह के बाद, मैं बाकी हिस्सों से सहमत हूं - परिदृश्य से चित्र से परिदृश्य तक फ़्लिपिंग सफारी में एक बग का खुलासा करता है।इसका उपयोग करने का एकमात्र तरीका यह है कि:

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" /> 

यह प्रत्येक अभिविन्यास को उचित पैमाने पर रखता है। इस फिक्स का एकमात्र नकारात्मक पक्ष यह है कि आप ज़ूम-इन नहीं कर सकते हैं। छोटे टेक्स्ट, या पुराने दर्शकों के साथ साइटों के लिए कोई अच्छा समाधान नहीं है, लेकिन अन्यथा यह चाल है।

इसके अतिरिक्त, यहां एक अच्छा जेएस हैक है: https://gist.github.com/901295 जो ज़ूमिंग की अनुमति देता है। हालांकि, एक बार ज़ूम किया गया, यदि अभिविन्यास बदल गया है तो वही पुराना बग सेट होता है।

Answer 3

एक बेहतर समाधान मिला। आईपैड और आईफोन दोनों परिदृश्य और चित्र पर काम करता है।

<meta name="viewport" content="width=1062px, user-scaleable=yes" /> 

1062px कुछ भी पूर्व हो सकता है: 800px या कुछ बड़ा।

Answer 4

@ ग्राहम-टी में आईएमओ का सबसे अच्छा समाधान है, लेकिन इसमें केवल एक समस्या है; अब यह डिवाइस रिज़ॉल्यूशन के आधार पर उत्तरदायी आकार का आकार नहीं लेगा। के लिए मुझे कम से कम

यह काम कर देता है - मैं चौड़ाई और लैंडस्केप मोड में आईपैड पर कोई स्केलिंग मिलता है, प्लस यह अन्य उपकरणों पर ठीक से आकार बदलता है: एक बेहतर समाधान मिले

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />