2011-08-16 16 views
6

जब आप अपने फोन पर एक वेबपेज पर जाते हैं (मैं एंड्रॉइड का उपयोग कर रहा हूं) यदि यह एक नियमित पृष्ठ है तो यह आपके फोन स्क्रीन में फिट होने के लिए इसे छोटा करता है।मोबाइल वेब पेज कैसे कम नहीं करता है?

मुझे हमेशा मोबाइल पृष्ठ बनाने का तरीका माना जाता है कि पृष्ठ को स्क्रीन के संकल्प में पूरी तरह से फिट करने के लिए पर्याप्त छोटा पृष्ठ बनाना पर्याप्त नहीं था।

हालांकि यह नहीं हो रहा है। मैं विशेष रूप से अपने पृष्ठ का आकार body{ width: 300px;} पर सेट करता हूं, फिर भी जब मैं इसे अपने फोन में लोड करता हूं तो यह शीर्ष बाएं कोने में घिरा हुआ है जिसमें इसके आस-पास बहुत खाली स्थान है।

मैं क्या गलत कर रहा हूं?

+0

में व्यूपोर्ट

<!doctype html> <html> <head> <title>Hello world!</title> <meta name="viewport" content="width=device-width"/> </head> <body> <p>Hello world!</p> </body> </html> 

पढ़ें उपयोग करने की आवश्यकता मैंने पहले इस सवाल का जवाब है: http://stackoverflow.com/questions/2977550/iphone-safari- सीएसएस-रोटेशन-बग/3188736 # 3188736 –

उत्तर

9

आप विस्तार यहाँ http://davidbcalhoun.com/2010/viewport-metatag

+0

धन्यवाद जो इसे ठीक करता है! :) –

+0

अच्छा जवाब, लेकिन वह अभी भी अपने वास्तविक आकार पर वेब पेज नहीं दिखाता है। वेब पेज पर 1 पिक्सेल वास्तव में मोबाइल स्क्रीन पर 1.5 पिक्सल है। – trusktr

0

ऐसा इसलिए है क्योंकि शरीर की चौड़ाई ब्राउज़िंग डिवाइस के संबंध में है।

अधिकांश आधुनिक फोन डेस्कटॉप ब्राउज़र का अनुकरण करते हैं और इसलिए कुल ब्राउज़र विंडो के संबंध में 300px की चौड़ाई 300px है। असल में, आप अपने डेस्कटॉप ब्राउज़र में वही देखेंगे जैसा आप अपने फोन ब्राउज़र में करेंगे।

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

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