2011-11-16 8 views
35

के लिए ठीक करने के लिए साइट को स्केल करने के लिए कैसे मजबूर कर सकता हूं जब मैं अपनी साइट को एक आईफोन में लोड करता हूं तो यह स्केल नहीं होता है। मैं देखता हूं कि शीर्ष-बाएं सबसे ज्यादा सौ वर्ग पिक्सल हैं। मैं मोबाइल ऑप्टिमाइज़ेशन के लिए नया हूं, लेकिन मुझे लगता है कि अधिकांश पेज स्वचालित रूप से फिट होने के लिए स्क्रॉल करते हैं, और अधिकांश प्रश्न विपरीत परिदृश्य के लिए प्रतीत होते हैं (बल स्केल करने के लिए नहीं)।मैं मोबाइल (आईफोन एंड्रॉइड ..)

मैं चाहता हूं कि पूरे पृष्ठ की चौड़ाई दृश्यमान हो और इसे बनाने के लिए उपयोगकर्ता को टेक्स्ट पढ़ने के लिए ज़ूम इन करना होगा।

मैंने सिर में निम्नलिखित कोड के साथ और बिना प्रयास किया है, लेकिन इसका कोई स्पष्ट प्रभाव नहीं है।

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

<!-- I Also tried: --> 
<meta name="viewport" content="width=1024, initial-scale=1"> 
+0

मैं परीक्षण करने के लिए http://iphonetester.com/ का उपयोग कर रहा हूं ... –

+1

"इसे बनाने के बजाय उपयोगकर्ता को पाठ पढ़ने के लिए ज़ूम इन करना होगा" क्या आपका मतलब है "इसे उपयोगकर्ता बनाना पाठ को पढ़ने के लिए ज़ूम इन नहीं करना है "? – Doug

+1

@ डॉउग: नहीं। मैं चाहता हूं कि पेज (एड) पृष्ठ को पूरी तरह से ज़ूम आउट करने के लिए पृष्ठ को प्रस्तुत करें, इसलिए स्क्रॉल किए बिना इसकी पूर्ण 1024px चौड़ाई स्क्रीन पर होगी। यह साइट उत्तरदायी या अन्यथा चालाक होने के लिए नहीं थी। शायद आदर्श नहीं है, लेकिन यह साइट को सभी प्रमुख घटकों के साथ, फोन पर आकर्षक लगती है। उपयोगकर्ता ज़ूमिंग पर बहुत अच्छे हैं इसलिए मैंने उन्हें जाने दिया। –

उत्तर

47

यहाँ डॉक्स का उपयोग करना: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

ऐसा लग रहा था जैसे आप व्यूपोर्ट गुण का सबसे अनदेखा कर देना चाहिए और सिर्फ उपयोगकर्ता के स्केलेबल "हाँ" करने के लिए निर्धारित किया है। यह अब मेरे आईफोन पर काम कर रहा है।

<meta name="viewport" content="user-scalable = yes"> 

संपादित करें :: मोबाइल परीक्षक साइट स्केलिंग की अनुमति नहीं देती है, इसलिए यह केवल स्क्रॉलबार देता है। एक वास्तविक फोन के साथ यह काम करता है।

+0

खुशी है कि यह आपके लिए काम करता है। साइट भी बहुत अच्छी लगती है। –

+0

ओह, यह बहुत आसान है .. – user828591

2

व्यूपोर्ट टैग नियंत्रण पृष्ठ के कौन से भाग जा रहा है शुरू में दिखाया जा सकता है, लेकिन स्वयं पृष्ठ अभी भी ज़ूम किए बिना iPhone पर दिखाए जाने के लिए एक 320x460 स्क्रीन आकार के लिए तैयार किया जाना चाहिए। यदि आप पृष्ठ की संरचना को संशोधित नहीं करना चाहते हैं, तो व्यूपोर्ट आपको इस बात पर नियंत्रण देता है कि पृष्ठ को प्रारंभ में दिखाया गया है।

+1

तो व्यूपोर्ट मेटा टैग इस समस्या का सही दृष्टिकोण है? मैंने 'मेटा नाम =" व्यूपोर्ट "सामग्री =" चौड़ाई = 1024, प्रारंभिक-पैमाने = 1 ">' कोशिश की लेकिन यह किसी भी चीज़ को प्रभावित नहीं कर रहा है। –

4

विभिन्न सीएसएस का उपयोग करने और क्लाइंट सेटिंग्स के आधार पर उन्हें (सर्वर पक्ष) स्विच करने का प्रयास करें। उदाहरण के लिए iPhone पहचान खुद को पसंद करेंगे:

HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) 
AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3 

क्या पटकथा भाषा आप सर्वर साइड पर उपलब्ध है के आधार पर आप सीएसएस बदल सकता है।

Here एक उदाहरण है।

+0

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

0

, width=1024 से छुटकारा सिर्फ

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

में डाल और, बाहर अपने फ़ोन के ब्राउज़र कैश साफ। बाद में भी & को बंद करना होगा।

+0

यह उस प्रश्न में समान कोड जैसा दिखता है जो मैंने * काम * नहीं किया था। जब तक '.0' कुछ नहीं करता .... ' <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाने = 1.0"> ' –

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