জাভাস্ক্রিপ্টে ডিভাইসের প্রস্থ পান

Question

জাভাস্ক্রিপ্ট ব্যবহার করে ভিউপোর্টের প্রস্থের বিপরীতে, ব্যবহারকারীদের ডিভাইস প্রস্থ পাওয়ার কি কোনও উপায় আছে?

সিএসএস মিডিয়া কোয়েরিগুলি এটি প্রস্তাব করে, যেমনটি আমি বলতে পারি

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

এবং

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

আমি ল্যান্ডস্কেপ অভিযোজনে স্মার্টফোনগুলি লক্ষ্যবস্তু করা হলে এটি দরকারী। উদাহরণস্বরূপ, আইওএস-এ একটি ঘোষণার max-width:640pxফলে ল্যান্ডস্কেপ এবং প্রতিকৃতি উভয়ই আইফোনকে লক্ষ্য করা যাবে 4. এন্ড্রয়েডের ক্ষেত্রে এটি নয়, যতদূর আমি বলতে পারি, সুতরাং ডিভাইস-প্রস্থটি সফলভাবে উভয় অভিযোজনকে লক্ষ্য করে, ডেস্কটপ ডিভাইসগুলিকে লক্ষ্য না করেই।

তবে , আমি যদি ডিভাইসের প্রস্থের ভিত্তিতে জাভাস্ক্রিপ্ট বাইন্ডিংয়ের আবেদন করছি তবে আমি ভিউপোর্টের প্রস্থের পরীক্ষা করতে সীমাবদ্ধ বলে মনে হচ্ছে, যার অর্থ নিম্নলিখিত হিসাবে একটি অতিরিক্ত পরীক্ষা,

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

ডিভাইসের প্রস্থটি CSS এর জন্য উপলব্ধ int এমন ইঙ্গিত দিলে এটি আমার কাছে মার্জিত বলে মনে হচ্ছে না।

Comments

আপনার ডিভাইসের সঠিক মাত্রা জানতে এই ওয়েবসাইটটি ব্যবহার করে দেখুন। প্রতিক্রিয়া

— js.com/labs/dimension

Modernizrআপনাকে এই "পরিষ্কার এবং জেনেরিক উপায়" করতে সহায়তা করতে পারে: স্ট্যাকওভারফ্লো / প্রশ্নগুলি / 25935686/… । 1 ম মন্তব্য সম্পর্কে: আপনি আপনার ব্যবহারের ক্ষেত্রে সবচেয়ে ভাল কাজ করে তা খুঁজে পেতে "মডার্নিজার বনাম <otherLib> মিডিয়া ক্যোয়ারী" গুগল করতে পারেন

— অ্যাড্রিয়েন

Answer 1

আপনি স্ক্রিন.উইথ সম্পত্তি দ্বারা ডিভাইসের স্ক্রিন প্রস্থ পেতে পারেন।
কখনও কখনও ডেস্কটপ ব্রাউজারগুলিতে উইন্ডো আকারটি ডিভাইসের স্ক্রিন আকারের চেয়ে কম থাকে এমন সময় ডেস্কটপ ব্রাউজারগুলির সাথে ডিল করার সময় স্ক্রিন প্রস্থের পরিবর্তে উইন্ডো.innernerwidth (সাধারণত মোবাইল ডিভাইসে পাওয়া যায় না) ব্যবহার করা দরকারী।

সাধারণত, মোবাইল ডিভাইস এবং ডেস্কটপ ব্রাউজারগুলির সাথে ডিল করার সময় আমি নিম্নলিখিতটি ব্যবহার করি:

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

Comments

আমি লক্ষ্য করেছি যে এটি অ্যান্ড্রয়েড ২.২ নেটিভ ব্রাউজারে প্রত্যাশা অনুযায়ী কাজ করে না। আমি যদি 1: 1 স্কেলে না থাকি তবে এটি অনেক বিস্তৃত প্রস্থের (পৃষ্ঠা যত প্রশস্ত হতে পারে) প্রতিবেদন করতে পারে যা কিছুটা হতাশার।

— ক্রিস বসকো

এটি এন্ড্রয়েডে ক্রোম বিটাতে 980 এবং এইচটিসি ভিভিডে অ্যান্ড্রয়েড ব্রাউজারে 1024 প্রদান করে।

— অ্যালেক্স

@ অ্যালেক্স এগুলি ব্রাউজারগুলির ডিফল্ট ভিউপোর্ট প্রস্থ। আপনি যদি ভিউপোর্ট মেটা-ট্যাগ ব্যবহার করেন তবে আপনার width=device-widthআসল মান পাওয়া উচিত।

— ব্রায়ান নিকেল

উইন্ডো.নিরউইথথ আইফোনটিতে (ক্রোম / সাফারি) 980 ফিরছে। ওটা কেমন? <মেটা নাম = "ভিউপোর্ট" সামগ্রী = "প্রস্থ = ডিভাইস-প্রস্থ" /> কোনও পার্থক্য করেনি।

— জোয়াও Leme

কীভাবে এর এত উপায়ে রয়েছে? 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

এটি একটি আরও ভাল সমাধান বলে মনে হচ্ছে এবং আসলে CSS মিডিয়া ক্যোয়ারী ব্যবহার করে। আমি ভাবছি মোবাইল প্ল্যাটফর্ম জুড়ে এর জন্য ব্রাউজার সমর্থন কী?

— কার্ল জুলাউফ

এটি কি সঠিক ব্যবহার হবে? if (window.matchMedia('(max-device-width: 960px)').matches) { var winW = (window.innerWidth > 0) ? window.innerWidth : screen.width; } else { var winW = screen.width; }

— নর্সউલ્ফ

আমি নিশ্চিত না যে এটি বেস হিসাবে 1: 1 এ স্কেলিং সেট ছাড়া কাজ করবে কিনা ...var isMobile = window.matchMedia && window.matchMedia('(max-device-width: 960px)').matches || screen.width <= 960;

— ট্র্যাকার 1

ব্রাউজারগুলি সমর্থন matchMedia()করছে না তাদের জন্য একটি পলিফিল রয়েছে: github.com/paulirish/matchMedia.js

— এভিএল

Caniuse.com অনুসারে কার্যত মোবাইল, সমর্থন উইন্ডো.ম্যাচমিডিয়া () সহ সমস্ত ব্রাউজারগুলি

— মার্ক ল্যাঞ্জার

Answer 3

আমার কেবল এই ধারণাটি ছিল, সুতরাং এটি সম্ভবত সংক্ষিপ্ত দৃষ্টিভঙ্গিযুক্ত, তবে এটি ভালভাবে কাজ করছে বলে মনে হচ্ছে এবং আপনার সিএসএস এবং জেএসের মধ্যে সর্বাধিক সামঞ্জস্যপূর্ণ হতে পারে।

আপনার সিএসএসে আপনি @ মিডিয়া স্ক্রিন মানের উপর ভিত্তি করে এইচটিএমএল-এর সর্বাধিক প্রস্থের মান সেট করেছেন:

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

    html { 
        max-width: 480px;
    }

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

}

তারপরে, জেএস ব্যবহার করে (সম্ভবত জ্যাকিউরির মতো কাঠামোর মাধ্যমে) আপনি কেবল এইচটিএমএল ট্যাগের সর্বোচ্চ-প্রস্থের মানটি পরীক্ষা করতে পারবেন:

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

এখন আপনি শর্তসাপেক্ষ পরিবর্তন করতে এই মানটি ব্যবহার করতে পারেন:

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

যদি এইচটিএমএল ট্যাগে সর্বাধিক প্রস্থের মানটি রাখা ভীতিজনক মনে হয় তবে আপনি অন্য কোনও ট্যাগ রাখতে পারেন যা কেবলমাত্র এই উদ্দেশ্যে ব্যবহৃত হয়। আমার প্রয়োজনে এইচটিএমএল ট্যাগটি ভাল কাজ করে এবং আমার মার্কআপকে প্রভাবিত করে না।

---

আপনি যদি স্যাস ইত্যাদি ব্যবহার করছেন তবে দরকারী : আরও বিমূর্ত মান যেমন ব্রেক ব্রেকপয়েন্টের নাম, পিএক্স মানের পরিবর্তে আপনি কিছু করতে পারেন:

1. একটি উপাদান তৈরি করুন যা ব্রেকপয়েন্টের নাম সংরক্ষণ করবে, যেমন <div id="breakpoint-indicator" />
2. সিএসএস মিডিয়া ক্যোয়ারীগুলি ব্যবহার করে এই উপাদানটির সামগ্রীর বৈশিষ্ট্য, যেমন "বৃহত" বা "মোবাইল" ইত্যাদি পরিবর্তিত হয় (উপরের মতো একই বেসিক মিডিয়া ক্যোয়ারী পদ্ধতির, তবে 'সর্বাধিক প্রস্থের পরিবর্তে সিএসএস সামগ্রী' সম্পত্তি সেট করা)।
3. $('#breakpoint-indicator').css('content');মিডিয়া কোয়েরি দ্বারা বিষয়বস্তুর সম্পত্তি কী সেট করা আছে তার উপর নির্ভর করে জেএস বা জ্যাকুরি (jquery উদাঃ ) ব্যবহার করে CSS সামগ্রীর সম্পত্তি মূল্য পান যা "বৃহত", বা "মোবাইল" ইত্যাদি ফিরিয়ে দেয়।
4. বর্তমান মান অনুসারে কাজ করুন।

স্যাসে যেমন আপনি এখন একই ব্রেকআপপয়েন্ট নামগুলিতে কাজ করতে পারেন, যেমন সাস: @include respond-to(xs)এবং জেএস if ($breakpoint = "xs) {}।

আমি বিশেষত এটি সম্পর্কে যা পছন্দ করি তা হ'ল আমি আমার ব্রেকআপপয়েন্টের নামগুলি সমস্ত CSS এবং এক জায়গায় (সম্ভবত একটি ভেরিয়েবল এসএসএস ডকুমেন্ট) সংজ্ঞায়িত করতে পারি এবং আমার জেএসগুলি এগুলিতে স্বাধীনভাবে কাজ করতে পারে।

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

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

লুমিয়া ফোনগুলি ভুল স্ক্রিন দেয় id প্রস্থ (কমপক্ষে এমুলেটারে)। তাহলে সম্ভবত 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

এই ক্লায়েন্টের ডিভাইস প্রস্থ পেতে এবং setInterval এ রেখে ডিভাইসটির প্রস্থের উপর নজর রাখতে আপনি ডকুমেন্ট.ডোকমেন্ট এলিমেন্ট.ক্লিয়েন্টউইথ ব্যবহার করতে পারেন

ঠিক যেমন

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

Comments

শুধু onresize ব্যবহার করুন। উদাহরণস্বরূপ document.getElementsByTagName ( "শরীর") [0] .onresize = ফাংশন () জন্য

— RationalRabbit

Answer 11

ঠিক একটি এফওয়াইআই হিসাবে, ব্রেকপয়েন্টস নামে একটি গ্রন্থাগার রয়েছে যা সিএসএসে নির্ধারিত সর্বাধিক প্রস্থ সনাক্ত করে এবং <=, <,>,> = এবং == চিহ্ন ব্যবহার করে আপনাকে জেএসে এটি ব্যবহার করতে দেয়। আমি এটি বেশ দরকারী বলে মনে করি। পে-লোডের আকার 3 কেবি এর নীচে।