मैं वर्तमान में अपनी वेबसाइट पर मोबाइल डिवाइस का पता लगाने के लिए जावास्क्रिप्ट का उपयोग कर रहा हूं, यह मुझे मोबाइल या डेस्कटॉप उपयोगकर्ताओं के लिए अलग-अलग सामग्री की सेवा करने की अनुमति देता है।पिक्सेल अनुपात/घनत्व का पता लगाने के लिए सर्वोत्तम प्रथाएं क्या हैं?
वर्तमान में मैं window.devicePixelRatio और screen.width का उपयोग बाहर काम करने के अगर एक मोबाइल डिवाइस पर है या नहीं अगर है, तो जैसे उपयोगकर्ता:
var isMobileScreenWidth = ((screen.width/window.devicePixelRatio) < 768)
768px बिंदु है जिस पर हम परिभाषित मोबाइल या डेस्कटॉप तो 767 और नीचे है मोबाइल और 768 और ऊपर डेस्कटॉप है।
यह पूरी तरह से काम करता है, लेकिन मैं हाल ही में फ़ायरफ़ॉक्स, जब फ़ायरफ़ॉक्स में और यह परिवर्तन window.devicePixelRatio ज़ूम आउट किया गया है के साथ एक समस्या का सामना करते हैं, इसलिए:
zoom = 30%, window.devicePixelRatio = 0.3
zoom = 100%, window.devicePixelRatio = 1.0
zoom = 300%, window.devicePixelRatio = 3.0
यह अब मुझे एक समस्या का कारण बनता है क्योंकि किसी भी उपयोगकर्ताओं को जो फ़ायरफ़ॉक्स पर अपने ब्राउजर को ज़ूम किया है साइट के मोबाइल संस्करण को प्राप्त करें।
मैं सोच रहा था कि क्या किसी को पिक्सेल घनत्व प्राप्त करने का एक अलग या बेहतर तरीका पता था जो डेस्कटॉप ब्राउज़र से अलग है।
मैं उपयोगकर्ता एजेंट पहचान की एक छोटी राशि का भी उपयोग करता हूं लेकिन मोबाइल उपयोगकर्ता एजेंटों की लगातार बदलती सूची के साथ रखने के लिए यह एक बड़ी नौकरी है क्योंकि मेरे लिए स्क्रीन रिज़ॉल्यूशन और उपयोगकर्ता दोनों पर निर्भर होना संभव नहीं है एजेंट एक ही समय में।
अगर किसी के पास इसके बारे में कोई विचार है और यह मददगार हो सकता है।
अद्यतन:
मैं सिर्फ यह भर में आ गए हैं:
window.screen.availWidth/document.documentElement.clientWidth
गणित के इस त्वरित बिट इस पोस्ट में सुझाव दिया है:
window.devicePixelRatio does not work in IE 10 Mobile?
मैं इसे और यह परीक्षण किया है फ़ायरफ़ॉक्स में काम करें, और मेरी समस्या हल करती है, लेकिन दुर्भाग्य से अब क्रोम में समस्या आती है, इसलिए:
Chrome zoom = 100%,
window.devicePixelRatio = 1.0,
window.screen.availWidth/document.documentElement.clientWidth = 3.0
मुझे एक ठोस समाधान नहीं मिल रहा है जो सब कुछ के लिए काम करता है।
मोबाइल को जांचने के लिए आपको डिवाइस पिक्सेल अनुपात का उपयोग नहीं करना चाहिए: कुछ गैर मोबाइल डिवाइस "रेटिना" (आईपैड, मैक बुक प्रो ...) और मोबाइल शैलियों को दिखाएगा। केवल एचडी छवियों के लिए इसका इस्तेमाल करें। –
@ युकुलेले मैं आपकी चिंता देखता हूं। यही कारण है कि मैं 'window.devicePixelRatio' द्वारा 'screen.width' को विभाजित कर रहा था, फिर जांच कर रहा हूं कि इसका परिणाम' 768px' (आईपैड की चौड़ाई) से कम है या नहीं। ऐसा करने से अधिकांश टैबलेट डिवाइस मोबाइल शैली को देखने से रोके होंगे। हालांकि किंडल फायर जैसे कुछ टैबलेट डिवाइस मोबाइल शैलियों को दिखाते हैं क्योंकि वे छोटी गोलियाँ हैं। मैंने इस चिंता पर विचार नहीं किया क्योंकि मोबाइल उपकरणों ने इन उपकरणों के लिए काफी अच्छा प्रदर्शन किया है। – lukehillonline