জাভাস্ক্রিপ্ট কোড ব্যবহার করে ব্রাউজারের প্রস্থ কীভাবে পাবেন?

Question

আমি বর্তমান ব্রাউজারের প্রস্থ পেতে জাভাস্ক্রিপ্ট ফাংশন লেখার চেষ্টা করছি।

আমি এটি একটি পেয়েছি:

javascript:alert(document.body.offsetWidth);

তবে এটির সমস্যাটি যে এটির ব্যর্থতা যদি শরীরের প্রস্থ 100% থাকে।

এর চেয়ে ভাল আরও কোন কাজ বা কর্মক্ষেত্র রয়েছে?

Answer 1

2017 এর জন্য আপডেট

আমার আসল উত্তরটি ২০০৯ সালে লেখা হয়েছিল it এটি এখনও কাজ করার পরেও আমি এটি 2017 এর জন্য আপডেট করতে চাই Brow ব্রাউজারগুলি এখনও আলাদাভাবে আচরণ করতে পারে। ক্রস ব্রাউজারের ধারাবাহিকতা বজায় রাখতে দুর্দান্ত কাজ করার জন্য আমি jQuery দলকে বিশ্বাস করি। তবে পুরো লাইব্রেরিটি অন্তর্ভুক্ত করার দরকার নেই। JQuery উত্সে, প্রাসঙ্গিক অংশটি মাত্রা 37 সেকেন্ডের লাইনে পাওয়া যায় । এখানে এটি উত্তোলন করা হয়েছে এবং এককভাবে কাজ করতে সংশোধন করা হয়েছে:

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );

---

আসল উত্তর

যেহেতু সমস্ত ব্রাউজারগুলি আলাদাভাবে আচরণ করে, আপনাকে প্রথমে মানগুলির জন্য পরীক্ষা করতে হবে এবং তারপরে সঠিকটি ব্যবহার করতে হবে। এখানে একটি ফাংশন যা এটি আপনার জন্য করে:

function getWidth() {
  if (self.innerWidth) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientWidth) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

এবং একইভাবে উচ্চতার জন্য:

function getHeight() {
  if (self.innerHeight) {
    return self.innerHeight;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientHeight;
  }

  if (document.body) {
    return document.body.clientHeight;
  }
}

আপনার স্ক্রিপ্টগুলিতে getWidth()বা ব্যবহার করে উভয়কে কল করুন getHeight()। যদি ব্রাউজারের কোনও স্থানীয় বৈশিষ্ট্য সংজ্ঞায়িত না করা হয় তবে তা ফিরে আসবে undefined।

Comments

সেরা উত্তর কারণ ব্রাউজার উইন্ডো প্রস্থের ভিত্তিতে একটি সাধারণ পুনর্নির্দেশের জন্য আমাকে একটি 33 ক লাইব্রেরি অন্তর্ভুক্ত করতে হবে না

— ডেভিড আগুয়েরে

এটি jQuery এর বাস্তবায়নের তুলনায় ধারাবাহিকভাবে সঠিক (বা প্রত্যাশিত) ফলাফল উত্পন্ন করে।

— ইমানুয়েল জন

... এই তিনটির প্রত্যেকেই কিছু ফলাফল দেখায় এবং সমস্ত ফলাফল (প্রস্থ) আলাদা different উদাহরণস্বরূপ, গুগল ক্রোম দিয়ে দেখুন self.innerWidth 423, document.documentElement.clientWidth 326এবং document.body.clientWidth 406। এই ক্ষেত্রে প্রশ্ন: কোনটি সঠিক এবং কোনটি ব্যবহার করবেন? উদাহরণস্বরূপ আমি গুগল ম্যাপের আকার পরিবর্তন করতে চাই। 326 বা 423 বড় পার্থক্য। প্রস্থ যদি 700 ডলার হয়, তবে দেখুন 759, 735, 742 (এত বড় পার্থক্য নয়)

— Andris

@ ব্যবহারকারী2118559 var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);এবং var windowWidth = self.innerWidth || -1;// "বডি" বা "স্ক্রিন" বা "ডকুমেন্ট" এর কারণে "উইন্ডো" নয় যদি আপনি এইচটিএমএল এর একটি অতিরিক্ত প্রবাহিত সামগ্রী চেক করেন তবে বুঝতে পারবেন। # i.stack.imgur.com/6xPdH.png

— আব্দুল্লাহ

আপনার উদাহরণে অনুলিপি-পেস্টের ত্রুটি, ফাংশন getWidth()তথ্যসূত্রself.innerHeight

— দ্য গেকো

Answer 2

এটা একটা ব্যাপার গাধা ব্যথা । আমি বাজে কথা এড়িয়ে যাওয়া এবং jQuery ব্যবহার করার পরামর্শ দিচ্ছি , যা আপনাকে ঠিক করতে দেয় $(window).width()।

Comments

আমি যদি সঠিকভাবে স্মরণ করি তবে jQuery মূল দিকটিতে অনেকগুলি মাত্রা টেনে নিয়েছে। আপনি যে পরামর্শ দিচ্ছেন তা করার জন্য আপনার কি এখনও মাত্রা প্রয়োজন?

— নসরেডনা

আপনি করবেন না। যা দুর্দান্ত। প্রতি সম্পাদিত উত্তর। সতর্ক থাকুন জন্য ধন্যবাদ.

— বিশৃঙ্খলা

JQuery এ window (উইন্ডো)। প্রস্থ () সমর্থনটি কারও সাথেই প্রাসঙ্গিক হয় তবে সংস্করণ 1.2 থেকে since

— বিশৃঙ্খলা

আমি খুঁজে পেয়েছি যে $ (উইন্ডো)। প্রস্থ () সর্বদা নীচের উত্তরের উদাহরণ অনুসারে ইন্টার্নউইথ / ক্লায়েন্টউইথের মতো মানটি ফেরত দেয় না। jQuery এর সংস্করণ ব্রাউজার স্ক্রোলবারগুলিকে অ্যাকাউন্টে নেয় না (যাইহোক এফএফ তে)। এটি আমাকে সিএসএস @ মিডিয়া প্রশ্নের সাথে ভুল প্রস্থে ট্রিগার করার জন্য প্রচুর বিভ্রান্তির সৃষ্টি করেছে। নেটিভ কোড ব্যবহার করা আরও নির্ভরযোগ্য বলে মনে হচ্ছে কারণ এটি স্ক্রোলবারগুলির উপস্থিতি বিবেচনায় নেয়।

— কোডার

উইন্ডো প্রস্থ পেতে কোডের 30k লাইন যুক্ত করা একটি বিএডি সমাধান!

— কোডেকিম্প

Answer 3

var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

উভয়ই পূর্ণসংখ্যার ফেরত দেয় এবং jQuery প্রয়োজন হয় না। ক্রস ব্রাউজার সামঞ্জস্যপূর্ণ।

আমি প্রায়শই jQuery প্রস্থ () এবং উচ্চতা () এর জন্য অবৈধ মানগুলি পাই

Comments

সাফারি আইফোনে এটি ব্যবহার করতে সমস্যা হচ্ছে।

— নিউ ইভারেস্ট

Answer 4

কেন কেউ ম্যাচমিডিয়া উল্লেখ করে না?

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

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

অবশ্যই এটি সংখ্যার মান ফেরত দেয় না, তবে বুলিয়ান দেয় - যদি মিল হয় বা না হয়, তবে প্রশ্নের সাথে সঠিকভাবে ফিট নাও হতে পারে তবে আমরা যেভাবেই চাই এবং সম্ভবত প্রশ্নের লেখক চান।

Comments

শুধুমাত্র IE10 + সমর্থন করে।

— কুর্তান্দসো

যদি তারা আই 9 বা ততোধিক বয়স্ক ব্যবহার করে তবে তারা ইন্টারনেটের প্রাপ্য নয়।

— দারিয়াস.ভি

সাফারি আইফোন এটি সমর্থন করে বলে মনে হচ্ছে না।

— নিউ ইভারেস্ট

নতুন আইওএস সাফারি সংস্করণগুলিতে ম্যাচমিডিয়া সমর্থন করা উচিত। সূত্র: caniuse.com/#feat=matchmedia

— ভার্গার

Answer 5

ডাব্লু 3 স্কুল এবং এর ক্রস ব্রাউজার থেকে আইই এর অন্ধকার যুগে!

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";

alert("Browser inner window width: " + w + ", height: " + h + ".");

</script>

</body>
</html>

Comments

পদ্ধতিরটি সুন্দরভাবে কাজ করে এবং এটি গ্রহণযোগ্য উত্তর হতে পারে, কারণ এটি অন্য কোনও সমাধানের তুলনায় অনেক কম (jQuery ব্যবহার ব্যতীত)।

— সাইমন স্টেইনবার্গার

ডকুমেন্ট.ডোকামেন্টএলমেন্ট অপরিজ্ঞাত করা থাকলে এটি ত্রুটি ছুঁড়ে ফেলবে না?

— ফিলোহো

Answer 6

উপরে উপস্থাপিত ফাংশনের একটি সংক্ষিপ্ত সংস্করণ এখানে দেওয়া হল:

function getWidth() {
    if (self.innerWidth) {
       return self.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientHeight){
        return document.documentElement.clientWidth;
    }
    else if (document.body) {
        return document.body.clientWidth;
    }
    return 0;
}

Comments

যা সমস্ত শর্ত ভুয়া থাকলে মান ফিরিয়ে দিতে ব্যর্থ হয়।

— মাইক সি

আপনার এলিজের দরকার নেই :)

— নিক

Answer 7

ট্র্যাভিসের জবাবের আধুনিক জেএসের একটি অভিযোজিত সমাধান:

const getPageWidth = () => {
  const bodyMax = document.body
    ? Math.max(document.body.scrollWidth, document.body.offsetWidth)
    : 0;

  const docElementMax = document.documentElement
    ? Math.max(
        document.documentElement.scrollWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
      )
    : 0;

  return Math.max(bodyMax, docElementMax);
};

Answer 8

ট্র্যাভিসের উত্তরের একটি গুরুত্বপূর্ণ সংযোজন; স্ক্রোলবারের প্রস্থ গণনা করা হয়েছে তা নিশ্চিত করার জন্য আপনাকে নথির বডিটিতে getWidth () স্থাপন করতে হবে, অন্যথায় ব্রাউজারের স্ক্রোলবার প্রস্থটি getWidth () থেকে বিয়োগ করা হয়েছে। আমি কি করেছিলাম ;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>

এবং এরপরে যেকোন জায়গায় অ্যাডথ ভেরিয়েবল কল করুন।