जावास्क्रिप्ट में डिवाइस की चौड़ाई प्राप्त करें

Question

क्या जावास्क्रिप्ट का उपयोग करके व्यूपोर्ट चौड़ाई के विपरीत, उपयोगकर्ताओं के डिवाइस की चौड़ाई प्राप्त करने का एक तरीका है?

सीएसएस मीडिया क्वेरीज़ की पेशकश करता है, जैसा कि मैं कह सकता हूं

@media screen and (max-width:640px) {
    /* ... */
}

तथा

@media screen and (max-device-width:960px) {
    /* ... */
}

यह उपयोगी है अगर मैं लैंडस्केप ओरिएंटेशन में स्मार्टफ़ोन को लक्षित कर रहा हूँ। उदाहरण के लिए, iOS पर max-width:640pxभी iPhone पर परिदृश्य और पोर्ट्रेट मोड दोनों को लक्षित करने की घोषणा की जाएगी। यह एंड्रॉइड के लिए ऐसा नहीं है, जहां तक ​​मैं बता सकता हूं, इसलिए इस उदाहरण में डिवाइस-चौड़ाई का उपयोग करते हुए सफलतापूर्वक दोनों झुकावों को लक्षित करता है, डेस्कटॉप उपकरणों को लक्षित किए बिना।

हालाँकि , अगर मैं डिवाइस चौड़ाई के आधार पर एक जावास्क्रिप्ट बाइंडिंग को लागू कर रहा हूं, तो मैं व्यूपोर्ट चौड़ाई के परीक्षण तक सीमित प्रतीत होता हूं, जिसका अर्थ निम्न के रूप में एक अतिरिक्त परीक्षण है:

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

यह मेरे लिए सुरुचिपूर्ण नहीं लगता, यह देखते हुए कि डिवाइस की चौड़ाई सीएसएस के लिए उपलब्ध है।

Comments

अपने डिवाइस के सही आयामों को जानने के लिए इस वेबसाइट को आज़माएं। responsejs.com/labs/dimensions

— अल्पेश दरजी

Modernizrक्या आप इसे "साफ और सामान्य तरीका" करने में मदद कर सकते हैं: stackoverflow.com/questions/25935686/… । पहली टिप्पणी के बारे में: आप अपने उपयोग के मामले में सबसे अच्छा काम करने के बारे में जानने के लिए "Modernizr बनाम <otherLib> मीडिया क्वेरी" को गूगल करना चाहते हैं

— Adrien Be

Answer 1

आप स्क्रीन के माध्यम से डिवाइस स्क्रीन की चौड़ाई प्राप्त कर सकते हैं।
कभी-कभी डेस्कटॉप ब्राउजर से निपटने के दौरान स्क्रीन की चौड़ाई के बजाय window.innerWidth (आमतौर पर मोबाइल उपकरणों पर नहीं पाया जाता) का उपयोग करना भी उपयोगी होता है, जहां विंडो का आकार अक्सर डिवाइस स्क्रीन के आकार से कम होता है।

आमतौर पर, मोबाइल उपकरणों और डेस्कटॉप ब्राउज़रों के साथ काम करते समय मैं निम्नलिखित का उपयोग करता हूं:

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

Comments

मैंने देखा है कि यह एंड्रॉइड 2.2 देशी ब्राउज़र पर अपेक्षित रूप से काम नहीं करता है। अगर मैं 1: 1 के पैमाने पर नहीं हूं, तो यह बहुत व्यापक चौड़ाई (पेज जितना चौड़ा हो सकता है) की सूचना दे सकता है, जो थोड़ा निराशाजनक है।

— क्रिस बोस्को

यह एंड्रॉइड पर क्रोम बीटा पर 980 और एचटीसी विविड पर एंड्रॉइड ब्राउज़र पर 1024 रिटर्न देता है।

— एलेक्स

@ एलेक्स ये ब्राउज़र की डिफ़ॉल्ट व्यूपोर्ट चौड़ाई हैं। यदि आप व्यूपोर्ट मेटा-टैग का उपयोग करते हैं तो आपको width=device-widthवास्तविक मूल्य मिलना चाहिए।

— ब्रायन निकल

window.innerWidth Iphone (Chrome / Safari) पर 980 लौटा रहा है। यह कैसा है? <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = उपकरण-चौड़ाई" /> कोई फर्क नहीं पड़ा।

— जोआओ लेम

यह इतने सारे उत्थान कैसे करता है? var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;आईफोन 6 और 6 प्लस पर 667 रिटर्न। यह समाधान सही ढंग से काम नहीं करता है।

— इयान एस

Answer 2

ब्रायन रीगर के उपयोगी उत्तर के साथ एक मुद्दा यह है कि उच्च-घनत्व डिस्प्ले पर, ऐप्पल डिवाइस डिप्स में स्क्रीन की उपलब्धता की रिपोर्ट करते हैं, जबकि एंड्रॉइड डिवाइस भौतिक पिक्सल में इसकी रिपोर्ट करते हैं। ( Http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html देखें ।) मैं if (window.matchMedia('(max-device-width: 960px)').matches) {}मैचमाडिया का समर्थन करने वाले ब्राउज़रों का उपयोग करने का सुझाव देता हूं।

Comments

यह एक बेहतर समाधान की तरह लगता है और वास्तव में सीएसएस मीडिया प्रश्नों का उपयोग करता है। मुझे आश्चर्य है कि मोबाइल प्लेटफ़ॉर्म पर इसके लिए ब्राउज़र का समर्थन क्या है?

— कार्ल जुलाफ

क्या यह सही उपयोग होगा? if (window.matchMedia('(max-device-width: 960px)').matches) { var winW = (window.innerWidth > 0) ? window.innerWidth : screen.width; } else { var winW = screen.width; }

— norsewulf

मुझे यकीन नहीं है कि अगर यह स्केलिंग सेट के बिना 1: 1 को आधार के रूप में काम करेगा ...var isMobile = window.matchMedia && window.matchMedia('(max-device-width: 960px)').matches || screen.width <= 960;

— ट्रैकर 1

ब्राउज़रों का समर्थन matchMedia()नहीं करने के लिए एक

— पॉलीफ़िल है

Caniuse.com के अनुसार व्यावहारिक रूप से सभी ब्राउज़र, जिनमें मोबाइल भी शामिल है, window.matchMedia ()

— मार्क लैंगर

Answer 3

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

अपने CSS में आपने @media स्क्रीन वैल्यू के आधार पर html के लिए अधिकतम-चौड़ाई मान निर्धारित किया है:

@media screen and (max-width: 480px) and (orientation: portrait){

    html { 
        max-width: 480px;
    }

    ... more styles for max-width 480px screens go here

}

फिर, JS (शायद JQuery जैसे ढांचे के माध्यम से) का उपयोग करके, आप बस html टैग की अधिकतम-चौड़ाई मान की जाँच करेंगे:

maxwidth = $('html').css('max-width');

अब आप सशर्त परिवर्तन करने के लिए इस मूल्य का उपयोग कर सकते हैं:

If (maxwidth == '480px') { do something }

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

---

उपयोगी यदि आप Sass, आदि का उपयोग कर रहे हैं : अधिक सार मान लौटाने के लिए, जैसे कि ब्रेकप्वाइंट नाम, px मान के बजाय आप कुछ ऐसा कर सकते हैं:

1. एक तत्व बनाएं जो ब्रेकपॉइंट नाम को स्टोर करेगा, जैसे <div id="breakpoint-indicator" />
2. सीएसएस मीडिया क्वेश्चन का उपयोग करने से इस तत्व के लिए कंटेंट प्रॉपर्टी बदल जाती है, जैसे "बड़े" या "मोबाइल", आदि (ऊपर जैसा बेसिक मीडिया क्वेरी अप्रोच, लेकिन 'मैक्स-चौड़ाई' के बजाय सीएसएस 'कंटेंट' प्रॉपर्टी सेट करना)।
3. Js या jquery (jquery उदा $('#breakpoint-indicator').css('content');) का उपयोग करके css कंटेंट प्रॉपर्टी वैल्यू प्राप्त करें , जो कि "बड़े", या "मोबाइल", इत्यादि देता है, जो इस बात पर निर्भर करता है कि मीडिया क्वैरी द्वारा क्या कंटेंट प्रॉपर्टी सेट की गई है।
4. वर्तमान मूल्य पर कार्य करें।

अब आप उसी ब्रेकपॉइंट नामों पर कार्य कर सकते हैं जैसा कि आप sass में करते हैं, जैसे sass: @include respond-to(xs)और js if ($breakpoint = "xs) {}।

मुझे इस बारे में विशेष रूप से पसंद है कि मैं अपने ब्रेकपॉइंट के नाम को सभी सीएसएस में और एक जगह (संभवतः एक वैरिएबल एससीएस दस्तावेज़) को परिभाषित कर सकता हूं और मेरे जेएस उन पर स्वतंत्र रूप से कार्य कर सकते हैं।

Answer 4

var width = Math.max(window.screen.width, window.innerWidth);

यह अधिकांश परिदृश्यों को संभालना चाहिए।

Comments

Math.max (window.innerWidth); आपको फ़ायर्फ़ॉक्स, एज और क्रोम में स्क्रॉलबार सहित चौड़ाई देगा। document.documentElement.clientWidth; उन ब्राउज़रों में किसी भी स्क्रॉलबार के अंदर की चौड़ाई देगा। IE 11 में, दोनों स्क्रॉलबार सहित चौड़ाई दिखाएंगे ..

— RationalRabbit

Answer 5

आपको उपयोग करना चाहिए

document.documentElement.clientWidth

इसे क्रॉस-ब्राउज़र कम्पैटिबिलिटी के रूप में माना जाता है, और यह वही विधि है जो jQuery (विंडो)। उपलब्धता (); का उपयोग करता है।

विस्तृत जानकारी के लिए यहाँ देखें: https://ryanve.com/lab/dimensions/

Answer 6

मुझे लगता window.devicePixelRatioहै कि window.matchMediaसमाधान से अधिक सुरुचिपूर्ण उपयोग करना है :

if (window.innerWidth*window.devicePixelRatio <= 960 
    && window.innerHeight*window.devicePixelRatio <= 640) { 
    ... 
}

Answer 7

इसे जाँचे

const mq = window.matchMedia( "(min-width: 500px)" );

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

Answer 8

आप आसानी से उपयोग कर सकते हैं

document.documentElement.clientWidth

Comments

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

— टिम डाइकमैन

Answer 9

लूमिया फोन गलत स्क्रीनसेवर देते हैं (कम से कम एमुलेटर पर)। तो शायद Math.min(window.innerWidth || Infinity, screen.width)सभी उपकरणों पर काम करेंगे?

या कुछ पागल:

for (var i = 100; !window.matchMedia('(max-device-width: ' + i + 'px)').matches; i++) {}
var deviceWidth = i;

Answer 10

हां mybe u का उपयोग कर सकते हैं document.documentElement.clientWidth क्लाइंट की डिवाइस चौड़ाई पाने के लिए और सेट पर डिवाइस की चौड़ाई को ट्रैक करते रहें।

बिलकुल इसके जैसा

setInterval(function(){
        width = document.documentElement.clientWidth;
        console.log(width);
    }, 1000);

Comments

बस onresize का उपयोग करें। उदाहरण के लिए document.getElementsByTagName ("BODY") [0] .onresize = function ()

— RationalRabbit

Answer 11

एक FYI के रूप में, ब्रेकपॉइंट्स नामक एक लाइब्रेरी है जो CSS में सेट के रूप में अधिकतम-चौड़ाई का पता लगाता है और आपको JS में इसका उपयोग करने की अनुमति देता है यदि <-<,>,>, = = और == संकेतों का उपयोग करते हुए। मुझे यह काफी उपयोगी लगा। पेलोड का आकार 3 केबी से कम है।