ব্রাউজারের ভিউপোর্টের মাত্রা কীভাবে পাবেন?

788

আমি আমার দর্শকদের উচ্চ মানের ছবিগুলি দেখার ক্ষমতা সরবরাহ করতে চাই, উইন্ডোর আকার সনাক্ত করার কোনও উপায় আছে কি?

বা আরও ভাল, জাভাস্ক্রিপ্ট সহ ব্রাউজারের ভিউপোর্টের আকার? এখানে সবুজ অঞ্চল দেখুন:

javascript  cross-browser  viewport 
— অ্যালিক্স এক্সেল
সূত্র
10
আমি যা করি তা হল একটি উপাদান সাধারণত html থেকে 100% উচ্চতায় সেট করুন এবং এর উচ্চতা পান। সর্বত্র সহজ কাজ।
— মুহাম্মদ উমার
1
@ মুহম্মদ উমর ভাল ধরা! যদি আপনি মাত্রাগুলি পেয়ে হতাশ হন (এবং আপনি jQuery ছাড়াই মোবাইল ফোনে যাবেন), আপনি getComputedStyleপ্রসারিত htmlট্যাগটি দেখতে পারেন ।
— ড্যান
এছাড়াও, আপনি ডাব্লু লাইব্রেরি ব্যবহার করতে পারেন , যা ক্রস ব্রাউজার ভিউপোর্ট সনাক্তকরণ পরিচালনা করে;)
— পিয়ারস্ম্ক

উত্তর:

1326

ক্রস ব্রাউজার @media (width) এবং @media (height)মান 

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

window.innerWidth এবং .innerHeight

  • সিএসএস ভিউপোর্ট পায় @media (width)এবং @media (height)এতে স্ক্রোলবারগুলি অন্তর্ভুক্ত রয়েছে
  • initial-scaleএবং জুম বৈচিত্রগুলির কারণে মোবাইল মানগুলি পিপিকে ভিজ্যুয়াল ভিউপোর্টকে কল হিসাবে ভুলভাবে স্কেল করতে এবং এর চেয়ে ছোট হতে পারে@media মানগুলির
  • জুমের ফলে দেশীয় রাউন্ডিংয়ের কারণে মানগুলি 1px বন্ধ হয়ে যায়
  • undefined আইই 8- এ

document.documentElement.clientWidth এবং .clientHeight

সম্পদ

— ryanve
সূত্র
4
@ 01100001 প্রতিস্থাপন $সঙ্গে verge। আপনি যদি jQuery এর সাথে সংহত করতে চান তবে করুন jQuery.extend(verge)। দেখুন: verge.airve.com/#static
— ryanve
4
শুধু উল্লেখ করতে চেয়েছিলেন যে আইই 8 তে (এবং সম্ভবত অন্যরাও) <!DOCTYPE html>কোডটি কাজ করার জন্য আপনার অবশ্যই পৃষ্ঠার শীর্ষে থাকতে হবে ।
— জাজি বার ইয়োচে
6
আমি মোবাইল ডিভাইসগুলিতে ক্লায়েন্টউইথ / উচ্চতা নিয়ে খুশি নই, সত্যিই ট্রিপলিওডনওয়েড
— ড্যান
24
যদি আমি কিছু মিস না করি তবে এই উত্তরটি ভুল। Chrome এ, অন্তত, document.documentElement.clientHeightফেরৎ পৃষ্ঠা উচ্চতা , যখন window.innerHeightআয় ভিউপোর্ট উচ্চতা । বড় পার্থক্য.
— নাট
2
বিভিন্ন স্ক্রিন আকারের ভেরিয়েবল / সলিউশন লাইভ টেস্ট: ryanve.com
— অ্যালেক্স পান্ড্রিয়া
106

jQuery মাত্রা ফাংশন

$(window).width() এবং $(window).height()

— স্কট এভারেন্ডেন
সূত্র
60
@allyourcode, অসম্ভব, jQuery হ'ল সবার উত্তর ।
— জিওনক্রস
21
এটি ভিউপোর্টের আকার পায় না, তবে সামগ্রিক নথির আকার। চেষ্টা করে দেখুন
— আলেজান্দ্রো গার্সিয়া ইগলেসিয়াস
2
ব্রাউজারগুলির জন্য যা স্থির পোস্টিশনিং সহ তাদের অ্যাডন টুলবারগুলি এইচটিএমএল হিসাবে প্রদর্শন করে, এই সমাধানটি কাজ করছে না, বিশেষত যদি আপনি নিজের কোড শীর্ষ অবস্থান এবং শতাংশে ব্যবহার করতে চান।
— আদিব অরওই
7
@ আলেজান্দ্রোআইগলেসিয়াস: নাহ, আমি এইমাত্র এই পৃষ্ঠায় এটি পরীক্ষা করেছি। $(window).height();536 ফেরৎ, যেহেতু $("html").height();আয় 10599
— Flimm
2
এই মাত্রাগুলি সতর্ক করতে স্ক্রোলবারগুলি অন্তর্ভুক্ত করে না (যার বিভিন্ন ব্রাউজার এবং প্ল্যাটফর্মগুলিতে বিভিন্ন আকার রয়েছে) এবং সেজন্য তারা এই সমস্যার সমাধান না করে সিএসএস মিডিয়া প্রশ্নের সাথে এখানে মিলবে না।
— স্প্যান্সার ও'রেইলি
75

আপনি উইন্ডো.নিরউইথ এবং উইন্ডো ।

অভ্যন্তরীণ উচ্চতা বনাম আউটহাইট

— , CMS
সূত্র
29
যদিও ডায়াগ্রামের জন্য এটি আই +1 এ কাজ করে না: ডি। এই জাতীয় প্রশ্নের জন্য এগুলির বেশি না রাখাই অপরাধ হওয়া উচিত।
— অ্যালিউরকোড
8
@ সিএমএসটি document.documentElement.clientWidthআরও সঠিক এবং আরও ব্যাপকভাবে সমর্থিতwindow.innerWidth
— রায়ানভ
6
@ আরয়ানভ যদি "আরও নির্ভুল" দ্বারা আপনার অর্থ "এমনকি দূরবর্তীভাবে একই জিনিসটি করে না" তবে হ্যাঁ: পি
— ed
ফায়ারফক্স বিটা? এটি জাদুঘরের অন্তর্গত কিছু।
— ডেরেক 朕 會 功夫
মোবাইল বক্সে @boxed document.documentElement.clientWidth, আমাকে ভিউপোর্টের প্রস্থ দেয় যখন উইন্ডো। হ্যাঁ, এই রাস্তা।
— জন
33

আপনি যদি jQuery ব্যবহার না করেন তবে এটি কুশ্রী হয়ে যায়। এখানে একটি স্নিপেট যা সমস্ত নতুন ব্রাউজারে কাজ করা উচিত। আইইতে কুইর্কস মোড এবং স্ট্যান্ডার্ড মোডে আচরণটি আলাদা different এটি এটি যত্ন নেয়।

var elem = (document.compatMode === "CSS1Compat") ? 
    document.documentElement :
    document.body;

var height = elem.clientHeight;
var width = elem.clientWidth;
— চেতান স্যাস্ট্রি
সূত্র
8
এটি কি আপনাকে পৃষ্ঠার উচ্চতা দেয় না, ভিউপোর্টটি নয়? এই পৃষ্ঠায় এটি ইঙ্গিত দেয় বলে মনে হয়: বিকাশকারী.মোজিলা.আর.ইন
— ডিওএম
4
আপনি ব্যবহার করছেন clientHeightউপর document.documentElementউপাদান, যা আপনি ভিউপোর্ট আকার দিতে হবে। নথির আকার পেতে, আপনাকে এটি করতে হবে document.body.clientHeight। চেতন যেমন ব্যাখ্যা করেছেন, এই আচরণটি আধুনিক ব্রাউজারগুলিতে প্রযোজ্য। এটি পরীক্ষা করা সহজ। কেবল একটি কনসোল খুলুন এবং document.documentElement.clientHeightকয়েকটি খোলা ট্যাবগুলিতে টাইপ করুন।
— গাজুস
13

আমি জানি এটির একটি গ্রহণযোগ্য উত্তর আছে, তবে আমি এমন পরিস্থিতিতে পড়েছিলাম যেখানে clientWidthকাজ হয়নি, কারণ আইফোন (কমপক্ষে খনি) 320 নয় 980 ফিরিয়েছিল, তাই আমি ব্যবহার করেছিwindow.screen.width । আমি বিদ্যমান সাইটে কাজ করছিলাম, "প্রতিক্রিয়াশীল" হয়েছি এবং বড় ব্রাউজারগুলিকে আলাদা মেটা-ভিউপোর্ট ব্যবহার করতে বাধ্য করা দরকার force

আশা করি এটি কাউকে সহায়তা করে, এটি নিখুঁত নাও হতে পারে তবে এটি আইও এবং অ্যান্ড্রয়েডে আমার পরীক্ষায় কাজ করে। 

//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width 
  //first see if they have window.screen.width avail
  (function() {
    if (window.screen.width)
    {
      var setViewport = {
        //smaller devices
        phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
        //bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints  
        other: 'width=1045,user-scalable=yes',
        //current browser width
        widthDevice: window.screen.width,
        //your css breakpoint for mobile, etc. non-mobile first
        widthMin: 560,
        //add the tag based on above vars and environment 
        setMeta: function () {
          var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other; 
          var head = document.getElementsByTagName("head")[0];
          var viewport = document.createElement('meta');
          viewport.setAttribute('name','viewport');
          viewport.setAttribute('content',params);
          head.appendChild(viewport);
        }
      }
      //call it 
      setViewport.setMeta();
    }
  }).call(this);
— জমকাল
সূত্র
13

আমি ক্রস ব্রাউজারের পথটি দেখেছি এবং পেয়েছি:

function myFunction(){
  if(window.innerWidth !== undefined && window.innerHeight !== undefined) { 
    var w = window.innerWidth;
    var h = window.innerHeight;
  } else {  
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
  }
  var txt = "Page size: width=" + w + ", height=" + h;
  document.getElementById("demo").innerHTML = txt;
}
<!DOCTYPE html>
<html>
  <body onresize="myFunction()" onload="myFunction()">
   <p>
    Try to resize the page.
   </p>
   <p id="demo">
    &nbsp;
   </p>
  </body>
</html>
স্নিপেট প্রসারিত করুন

— user2921779
সূত্র
নোট করুন যে স্ট্যাকওভারফ্লো কোড স্নিপেটকে ঘিরে একটি আইফ্রেমে ব্যবহারের ফলে ফলাফলটি
— মিলার
11

আমি জাভাস্ক্রিপ্টে একটি সুনির্দিষ্ট উত্তর পেতে সক্ষম হয়েছি: ডিফিনিটিভ গাইড, ও'রিলির 6 তম সংস্করণ, পৃষ্ঠা p 391:

এই সমাধানটি কুইর্কস মোডেও কাজ করে, যখন রায়ানভ এবং স্কটএভারেন্ডেনের বর্তমান সমাধানটি করে না।

function getViewportSize(w) {

    // Use the specified window or the current window if no argument
    w = w || window;

    // This works for all browsers except IE8 and before
    if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return { w: d.documentElement.clientWidth,
           h: d.documentElement.clientHeight };

    // For browsers in Quirks mode
    return { w: d.body.clientWidth, h: d.body.clientHeight };

}

লাইনটি কেন if (document.compatMode == "CSS1Compat")হয় না তা অবাক করার পরেও if (d.compatMode == "CSS1Compat"), সবকিছু ভাল দেখাচ্ছে।

— nonopolarity
সূত্র
আপনি কি রেটিনা প্রদর্শন বা ল্যান্ডস্কেপ বনাম প্রতিকৃতি বা মেটা ভিউপোর্ট ট্যাগ সম্পর্কে কথা বলছেন? আপনি কি স্নোড্রাগনলেডক.কমের মতো ভার্চুয়াল পিক্সেল বোঝাতে চাইছেন না ?
— অবিচ্ছিন্নতা
1) উচ্চ-ডিপিআই প্রদর্শনগুলির কথা বলার অর্থ আমি এখানে বোঝানো ভার্চুয়াল পিক্সেল: stackoverflow.com/a/14325619/139361 । প্রতিটি আইফোন স্ক্রিন হ'ল 320 ভার্চুয়াল পিক্সেল প্রশস্ত। 2) আমি বলি যে: ক) documentElement.clientWidthআইওএসে ডিভাইস ওরিয়েন্টেশন পরিবর্তনের বিষয়ে প্রতিক্রিয়া জানায় না। খ) ভার্চুয়াল পিক্সেলের পরিবর্তে শারীরিক পিক্সেল গণনা (ব্যবহারিকভাবে অকেজো) প্রদর্শন করে
— ড্যান
11

আপনি যদি মোবাইলে ভার্চুয়াল পিক্সেলগুলিতে সঠিক মান দেয় এমন নন-জিকিউরি সমাধান সন্ধান করছেন এবং আপনি মনে করেন যে এটি সহজ window.innerHeightবা document.documentElement.clientHeightআপনার সমস্যার সমাধান করতে পারে তবে দয়া করে প্রথমে এই লিঙ্কটি অধ্যয়ন করুন: https://tripleodeon.com/assets/2011/12/ table.html

বিকাশকারী ভাল পরীক্ষা করেছেন যা সমস্যাটি প্রকাশ করে: আপনি অ্যান্ড্রয়েড / আইওএস, ল্যান্ডস্কেপ / প্রতিকৃতি, সাধারণ / উচ্চ ঘনত্বের প্রদর্শনগুলির জন্য অপ্রত্যাশিত মান পেতে পারেন।

আমার বর্তমান উত্তরটি এখনও রূপালী বুলেট নয় (// টুডো), বরং যারা এই থ্রেড থেকে প্রদত্ত যে কোনও সমাধান খুব দ্রুত প্রোডাকশন কোডে কপি-পেস্ট করতে যাচ্ছেন তাদের জন্য একটি সতর্কতা।

আমি মোবাইলে ভার্চুয়াল পিক্সেলগুলিতে পৃষ্ঠা প্রস্থের সন্ধান করছিলাম এবং আমি একমাত্র কার্যকরী কোডটি পেয়েছি (অপ্রত্যাশিতভাবে!) window.outerWidth। আমি পরে যখন সময় নেভিগেশন বার বাদে উচ্চতা প্রদান সঠিক সমাধান জন্য এই টেবিলটি পরীক্ষা করব।

— দেনিযেল
সূত্র
10

এই কোডটি http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ থেকে এসেছে

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

এনবি: প্রস্থ পড়তে, ব্যবহার করুন console.log('viewport width'+viewport().width);

— জাভিয়ের ব্লন্ডেল
সূত্র
9

window.innerHeightএবং মধ্যে পার্থক্য আছে document.documentElement.clientHeight। প্রথমটিতে অনুভূমিক স্ক্রোলবারের উচ্চতা অন্তর্ভুক্ত।

— জাজেপ ভিক্টর
সূত্র
1
আপনি কি উত্তরটি ওএসে জুড়ে রেটিনা ডিসপ্লেতে এবং ল্যান্ডস্কেপ / প্রতিকৃতি মোডগুলিতে পরীক্ষা করেছেন? এই লিঙ্কটি বরং পুরানো সিস্টেমগুলিকে কভার করে তবে এটি প্রমাণ করে যে আপনার কোডটি কাজ করে না: ট্রিপলিওডন
— ড্যান
6

ডাব্লু 3 সি মানের সাথে সঙ্গতিপূর্ণ একটি সমাধান হ'ল স্বচ্ছ ডিভ তৈরি করা (উদাহরণস্বরূপ জাভাস্ক্রিপ্ট সহ গতিময়), এর প্রস্থ এবং উচ্চতা 100vw / 100vh (ভিউপোর্ট ইউনিট) এ সেট করুন এবং তারপরে অফসেটউইথ এবং অফসেটহাইট পাবেন get এর পরে, উপাদানটি আবার সরানো যেতে পারে। এটি পুরানো ব্রাউজারগুলিতে কাজ করবে না কারণ ভিউপোর্ট ইউনিটগুলি তুলনামূলকভাবে নতুন, তবে আপনি যদি সেগুলির পরিবর্তে তবে (শীঘ্রই হতে হবে) মান সম্পর্কে চিন্তা না করেন তবে আপনি অবশ্যই এই পথে যেতে পারেন:

var objNode = document.createElement("div");
objNode.style.width  = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth  = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);

অবশ্যই, আপনিজেজ নোড.স্টাইল.পজিশন = "স্থির" সেট করতে পারেন এবং তারপরে প্রস্থ / উচ্চতা হিসাবে 100% ব্যবহার করতে পারেন - এর একই প্রভাব থাকতে হবে এবং কিছুটা হলেও সামঞ্জস্যতা উন্নত করতে হবে। এছাড়াও, স্থির স্থানে অবস্থান নির্ধারণ করা সাধারণভাবে একটি ভাল ধারণা হতে পারে, কারণ অন্যথায় ডিভি অদৃশ্য হয়ে যাবে তবে কিছু জায়গা খায় যা স্ক্রোলবারগুলি প্রদর্শিত হবে etc.

— Firefall
সূত্র
দুর্ভাগ্যক্রমে, বাস্তবতা আপনার " ডাব্লু 3 সি - মান সমাধান": 1 ) ক্যানিউজ . com/ভিউপোর্টপোর্ট- ইউনিটস , 2) ক্যানিউজ . com/#feat=css-fixed সম্পূর্ণরূপে ধ্বংস করে দেয় । বিকাশকারীদের যা দরকার তা হ'ল সমাধান যা কাজ করে, "তাত্ত্বিকভাবে কাজ করা উচিত নয়"।
— ড্যান
যদি আমরা স্ট্যান্ডার্ডের উপর নির্ভর করতে পারি তবে আমাদের এমনকি সেই সমস্ত ক্রস ব্রাউজার সমাধানের দরকার নেই। একটি সমাধান যা অনুমানের উত্তর দেয় কোনও সমাধান নয়।
— ডেরেক 朕 會 功夫
3

এইভাবে আমি এটি করি, আমি এটি 8 -> 10, এফএফ 35, ক্রোম 40 এ চেষ্টা করেছি, এটি সমস্ত আধুনিক ব্রাউজারগুলিতে (উইন্ডো। অভ্যন্তরীণ প্রস্থ) এটি পাশাপাশি মসৃণভাবে কাজ করে, যে কোনও সমস্যা (যেমন ওভারফ্লোর কারণে ঝলকানি: "লুকানো"), দয়া করে এটি প্রতিবেদন করুন। আমি ভিউপোর্টের উচ্চতার বিষয়ে সত্যই আগ্রহী নই কারণ আমি এই ফাংশনটি কেবলমাত্র কিছু প্রতিক্রিয়াশীল সরঞ্জামকে কাজে লাগিয়ে তৈরি করেছি, তবে এটি বাস্তবায়িত হতে পারে। আশা করি এটি সাহায্য করবে, আমি মন্তব্য এবং পরামর্শগুলির প্রশংসা করি।

function viewportWidth () {
  if (window.innerWidth) return window.innerWidth;
  var
  doc = document,
  html = doc && doc.documentElement,
  body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
  getWidth = function (elm) {
    if (!elm) return 0;
    var setOverflow = function (style, value) {
      var oldValue = style.overflow;
      style.overflow = value;
      return oldValue || "";
    }, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
    setOverflow(style, oldValue);
    return width;
  };
  return Math.max(
    getWidth(html),
    getWidth(body)
  );
}
— manolinjr81
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.