2011-12-19 12 views
6

पर ज़ूम किया गया एक समस्या है जहां सभी मोबाइल डिवाइस शुरू में 50% ज़ूम किया गया है। आईपैड के अलावा यह हर डिवाइस है। आईपैड के अलावा अन्य सभी 50% स्केल करने के लिए एक PHP चेक करने का प्रयास किया लेकिन जब आप परिदृश्य से चले गए -> पोर्ट्रेट -> परिदृश्य में यह एक बार फिर से 50% स्केल करेगा।एचटीएमएल/सीएसएस - मोबाइल

<meta name="HandheldFriendly" content="true" /> 
<meta name="viewport" content="width=640, height=700, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> 

मेरे एचटीएमएल केवल पिक्सल में किसी भी चौड़ाई 100% का उपयोग नहीं करता:

यहाँ मेरे वर्तमान मेटा टैग है। कुल मिलाकर सामग्री 640 चौड़ाई और 700 ऊंचाई तक नहीं बढ़ती है।

क्या किसी को इस बात से कोई फर्क नहीं पड़ता कि मैं इस मुद्दे से कैसे बच सकता हूं?

संपादित

निष्कर्ष है कि @hakre पिक्सल के पैमाने के बारे में सही था आया। मेरा फिक्स प्रत्येक चौड़ाई को पीएक्स की बजाय% में सेट करना था। इस तरह यह ऑटो आकार का कोई फर्क नहीं पड़ता कि क्या। ध्यान देने योग्य एक बात यह है कि मैंने पैमाने को हटा दिया। कारण यह है कि ऐसा लगता है कि यह कुछ उपकरणों पर लेआउट गड़बड़ कर रहा है। धन्यवाद एक बार फिर @hakre

+0

कुछ जवाब तत्वों यहाँ है: http://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on- ए-मोबाइल-वेब-पेज –

+0

येर, '<मेटा सामग्री =" प्रारंभिक-स्केल = 1.0; अधिकतम-स्केल = 1.0; उपयोगकर्ता-स्केलेबल = 0; "कहने जा रहा था नाम = "व्यूपोर्ट" /><मेटा सामग्री = "चौड़ाई = डिवाइस-चौड़ाई" नाम = "व्यूपोर्ट" /> ' लेकिन आपके लिंक में यह –

+0

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

उत्तर

2

सीएसएस में, px एक absolute length unit है। आउटपुट पर्यावरण ज्ञात होने पर वे मुख्य रूप से उपयोगी होते हैं।

एक सीएसएस डिवाइस के लिए, इन आयामों या तो (i) उनकी शारीरिक माप के लिए भौतिक इकाइयों संबंधित [में, सेमी, मिमी, pt, पीसी] द्वारा (ii) संबंधित द्वारा सहारा लेने लगते हैं, या पिक्सेल इकाई [पीएक्स] संदर्भ पिक्सेल पर। [अतिरिक्त और आकर्षण मेरे द्वारा]

संदर्भ पिक्सेल उपकरणों प्रदर्शन की शारीरिक पिक्सेल के आधे 700px की एक सीएसएस मूल्य 350px प्रदर्शन पर होना करने के लिए अनुवाद कर देगा है - या में 50% ने कहा कि अपने सवाल।

तो आप यहां जो अनुभव करते हैं वह बिल्कुल सही है, सीएसएस इस अर्थ में सही है कि आप px इकाइयां चुनते हैं, आपने अभी याद किया है कि सीएसएस में एक पीएक्स डिस्प्ले पर पिक्सेल जैसा नहीं है। जैसा कि यह नहीं है लेकिन आप इसे चाहते हैं, ऐसा लगता है कि आपने गलत इकाई चुना है।

फिर से: आउटपुट पर्यावरण ज्ञात होने पर पूर्ण लंबाई इकाइयां मुख्य रूप से उपयोगी होती हैं।

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

एक विकल्प के रूप में आप अपनी पूर्ण लंबाई को सापेक्ष वाले (एम, पूर्व) के साथ प्रतिस्थापित कर सकते हैं। चूंकि वे रिश्तेदार हैं, आपको पूरे पृष्ठ को बदलने के लिए केवल उस तत्व की लंबाई को बदलने की आवश्यकता है, जिसके संबंध में वे संबंधित हैं।

यह आमतौर पर <html> और/या <body> तत्व और अन्य सभी चीज़ों के सापेक्ष लंबाई पर पूर्ण लंबाई का उपयोग करके किया जाता है।

यह दृष्टिकोण आपको समस्या को हल करने में भी मदद कर सकता है।

+0

कोई मुद्दा नहीं है। बात यह है कि मोबाइल ब्राउज़र ऑनलोड 50% ज़ूम करता है। फिर आप ज़ूम आउट कर सकते हैं लेकिन तत्वों की चौड़ाई/ऊंचाई पूरी तरह से सही है। एक संभावित समाधान या तो इसे ज़ूम आउट करना होगा या ज़ूम बिल्कुल नहीं करना होगा। लेखन के लिए धन्यवाद लेकिन मुझे पहले से ही पता था कि :) मेरी समस्या यह है कि यह लोड पर ज़ूम किए गए राज्य में प्रतीत होता है। तत्वों का प्रदर्शन सही है। –

+0

बस एक और इनपुट। पहले से ही सभी तत्वों के लिए चौड़ाई निर्धारित की गई है और उनमें से कोई भी इस चौड़ाई का विस्तार नहीं करता है। कोशिश करने के लिए एक बार फिर धन्यवाद। –

+0

क्या आपके मामले में * ज़ूम * एक सीएसएस संपत्ति है? यदि हां, तो क्या आप क्लाइंट स्टाइल शीट पेस्ट कर सकते हैं? इसके अतिरिक्त आप [सीएसएस डिवाइस अनुकूलन] (http://dev.w3.org/csswg/css-device-adapt/) के बारे में जानते हैं? इसके लिए आपको एक विक्रेता विशिष्ट मॉड्यूल का उपयोग करने की आवश्यकता हो सकती है, यह अभी भी एक मसौदा है। – hakre

4

मैंने केवल एंड्रॉइड के डिफ़ॉल्ट ब्राउज़र और ओपेरा मोबाइल पर इसका परीक्षण किया है, लेकिन ऐसा लगता है कि यह अच्छी तरह से काम करता है। फिर भी कोई रास्ता नहीं दुर्भाग्य एंड्रॉयड के ब्राउज़र पर जूमिंग निष्क्रिय करने के लिए ...

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<meta name="viewport" content="target-densitydpi=device-dpi" /> 
<meta name="HandheldFriendly" content="true"/>