স্ক্রিন, বর্তমান ওয়েব পৃষ্ঠা এবং ব্রাউজার উইন্ডোর আকার পান

Question

আমি কিভাবে পেতে পারেন windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenYযা সমস্ত প্রধান ব্রাউজারে কাজ করবে?

Comments

পেজহাইট (একটি পিকের উপরে) আপনি পেতে পারেন: ডকুমেন্ট.বিডি.স্রোকল

— হাইট

দেখতে https://developer.mozilla.org/en-US/docs/Web/API/Window.screen এবং http://www.quirksmode.org/dom/w3c_cssom.html#screenview

— rawiro

এটিও কি প্রাসঙ্গিক হতে পারে? বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

আকর্ষণীয়: ryanve.com

— e2-e4

সহায়ক টিউটোরিয়াল - w3schools.com/jsref/prop_win_innerheight.asp

— চাচা Iroh

Answer 1

আপনি jQuery সহ উইন্ডো বা নথির আকার পেতে পারেন:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

স্ক্রিন আকারের জন্য আপনি screenঅবজেক্টটি ব্যবহার করতে পারেন :

window.screen.height;
window.screen.width;

Comments

JQuery পদ্ধতির উচ্চতা () সমস্ত উপাদানগুলির জন্য কাজ করে বলে মনে হয় এবং 46CSS ('উচ্চতা') ( "46px") এর মতো স্ট্রিংয়ের পরিবর্তে একটি সংখ্যা ( ) দেয়।

— ক্রিস

মোবাইল সাফারি নিয়ে কাজ করার সময়, দুঃখের সাথে jQuery এই প্রশ্নের সঠিক সমাধান নয়। # 13 লাইনে নোটটি github.com/jquery/jquery/blob/master/src/dimension.js

— জোশুয়া

@ 웃 웃웃 웃웃 উত্তরে আপনি কী সম্পাদনা করেছেন? সংশোধন অনুসারে, আপনি কিছুতেই কোনও সম্পাদনা করেননি

— ড্যানিয়েল ডাব্লু।

@ মার্কো কেরউইটজ সবচেয়ে খারাপ জিনিসটি হ'ল আমি "জাভাস্ক্রিপ্টটি উইন্ডো প্রস্থ" টাইপ করেছি এবং এই উত্তরের বিষয়বস্তু গুগলে ছিল। আমার কাছ থেকে একটি বড় বিয়োগ

— ম্যাকিয়েজ ক্রাভজাইক

ওপি ডিআইডি জিজ্ঞাসা করেছেন যে জেকোয়ারি একটি বিকল্প। একে বাদ দেওয়ার জন্য যে নিনজা মূল প্রশ্নটি সম্পাদনা করেছিলেন সে এখানে দোষযুক্ত, লোকেরা জাগতিক স্ক্রিপ্ট গ্রন্থাগার ব্যবহার করে বৈধ উত্তর দিচ্ছে না।

— অবিশ্বাস্য

Answer 2

এটিতে আপনার যা জানা দরকার তা রয়েছে: ভিউপোর্ট / উইন্ডোর আকার পান

তবে সংক্ষেপে:

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

বেহালা

দয়া করে এই উত্তরটি সম্পাদনা বন্ধ করুন। কোডটি বিন্যাসের পছন্দটি মেলে বিভিন্ন লোকেরা এটি এখন 22 বার সম্পাদনা করেছেন। এটি কেবল উল্লেখ করা হয়েছে যে আপনি কেবল আধুনিক ব্রাউজারগুলি লক্ষ্য করতে চাইলে এটির প্রয়োজন হয় না - যদি আপনার কেবল নিম্নলিখিতগুলির প্রয়োজন হয়:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);

Comments

না কেন g = document.body?

— একটি অর্থ প্রদান

@ পেইডনার্ড: আইই 8 এর মতো অমান্যকারী ব্রাউজারগুলি ডকুমেন্ট.বডি সমর্থন করে না। আই 9, তবে, করে।

— মাইকেল মিকোভস্কি 27'14

@ মিশেলমিকোভস্কি এটি সত্য নয়! এমনকি আই 5 সমর্থন করে document.body।

— Nux

@ নাক্স আমি সংশোধন করেছি, এবং আমি আইই 8-তে সমর্থন নিশ্চিত করেছি। আমি জানি যদিও সম্প্রতি আমরা টার্গেট করেছিলাম এমন একটি ব্রোভার ডকুমেন্টকে সমর্থন করে না body কাউকে এবং আমাদের এলিমেটবাটাইগনেম পদ্ধতির ব্যবহার করতে পরিবর্তন করতে হয়েছিল। তবে আমি অনুমান করি যে আমি ব্রাউজারটি ভুলভাবে কাটিয়েছি। দুঃখিত!

— মাইকেল মিকোভস্কি

আমি খুব নিখুঁতভাবে মন্তব্য করতে চাই যে এক-বর্ণের পরিবর্তনশীল নামগুলি কখনই সহায়ক হয় না।

— wybe

Answer 3

খাঁটি জাভাস্ক্রিপ্ট ( উত্স ) সহ এখানে একটি ক্রস ব্রাউজার সমাধান রয়েছে :

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

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

Comments

এটি আরও ভাল কারণ আপনি যদি স্ক্রিপ্টটি লোডিংয়ের প্রক্রিয়াতে প্রায়শই কল করতে সক্ষম হন (প্রায়শই ধারণা), তবে ডোমটি লোড না হওয়ায় এর body elementমান ফিরে আসবে undefined।

— ডিগো ডিগ্রি

হা! পুরানো থ্রেড তবে তার জন্য ধন্যবাদ! আমি অনুমান করি যে আমি সেই পুরানো "বোকামি "দের মধ্যে একজন, যিনি সম্ভব হলে কমপক্ষে IE8- এ ফিরে আসার পক্ষে চেষ্টা করার চেষ্টা করেছেন, যতক্ষণ না তাদের মেশিনগুলি আগুন ধরেছে ততক্ষণ পর্যন্ত এক্সপি ব্যবহার বন্ধ করবে না until আমি প্রশ্ন জিজ্ঞাসা করে ক্লান্ত হয়ে পড়েছি এবং উত্তর না দিয়ে কেবল "স্টপ সাপোর্টিং আইই 8" দিয়ে ভোট পেয়েছি! একটি মন্তব্য হিসাবে। আবার ধন্যবাদ! এটি আমার জন্য খাঁটি জাভাস্ক্রিপ্ট ফটো জুমে একটি সমস্যার সমাধান করেছে। আইই 8 তে এটি কিছুটা ধীরগতিতে, তবে এখন কমপক্ষে এটি কার্যকর হয় !!! :-)

— র্যান্ডি

দুর্দান্ত এটি বিশ্রামের চেয়ে অনেক ভাল।

— বিনায়ক শাহদেও

Answer 4

উপলভ্য স্ক্রিনের মাত্রা পাওয়ার জন্য একটি অ jQuery উপায়। window.screen.width/heightইতিমধ্যে স্থাপন করা হয়েছে, তবে প্রতিক্রিয়াশীল ওয়েব ডিজাইন এবং সম্পূর্ণতার জন্য আমি এই বৈশিষ্ট্যগুলি উল্লেখ করা উচিত বলে মনে করি:

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10 :

availWidth এবং availHeight - স্ক্রিনে উপলব্ধ প্রস্থ এবং উচ্চতা (ওএস টাস্কবারগুলি এবং এগুলি বাদ দিয়ে)।

Comments

প্রস্থের স্ক্রিনের মতোই হাইট - অ্যান্ড্রয়েড ক্রোম ব্রাউজারে পিক্সেল অনুপাত দ্বারা বিভক্ত শো :(

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

window.screen.availHeightপূর্ণ স্ক্রিন মোডটি ধরে নিয়েছে বলে মনে হচ্ছে যাতে স্বাভাবিক স্ক্রিন মোড স্ক্রোলিংয়ের জন্য চাপ দেয় (ফায়ারফক্স এবং ক্রোমে পরীক্ষিত)।

— সুজানা

@ সুজানা_ কে এর পরিবর্তে ব্যবহার window.screen.heightকরুন।

— ভালান্টিন

Answer 5

তবে যখন আমরা প্রতিক্রিয়াশীল স্ক্রিনগুলি নিয়ে কথা বলি এবং যদি আমরা কোনও কারণে jQuery ব্যবহার করে এটি পরিচালনা করতে চাই,

window.innerWidth, window.innerHeight

সঠিক পরিমাপ দেয়। এমনকি এটি স্ক্রোল-বারের অতিরিক্ত স্থান সরিয়ে দেয় এবং সেই স্থানটি সামঞ্জস্য করার বিষয়ে আমাদের চিন্তা করার দরকার নেই :)

Comments

এটি upvotes এর বোঝা সহ গৃহীত উত্তর হওয়া উচিত। বর্তমানে গৃহীত উত্তরের চেয়ে অনেক বেশি দরকারী উত্তর এবং এটি jQuery এর উপর নির্ভর করে না।

— developerbmw

দুর্ভাগ্যক্রমে, window.innerWidthএবং window.innerHeightঅ্যাকাউন্টে স্ক্রোল বারের আকার নিতে ব্যর্থ। যদি স্ক্রোল বারগুলি উপস্থিত থাকে তবে এই পদ্ধতিগুলি প্রায় সমস্ত ডেস্কটপ ব্রাউজারগুলিতে উইন্ডো আকারের জন্য ভুল ফলাফল দেয়। দেখুন stackoverflow.com/a/31655549/508355

— hashchange

Answer 6

ব্রাউজারের সরঞ্জামদণ্ড এবং অন্যান্য স্টাফগুলি এড়িয়ে আপনি উইন্ডো প্রস্থ এবং উচ্চতাও পেতে পারেন। এটি ব্রাউজারের উইন্ডোতে আসল ব্যবহারযোগ্য অঞ্চল ।

এটি করতে, ব্যবহার করুন: window.innerWidth এবং window.innerHeightবৈশিষ্ট্যগুলি ( ডাব্লু 3 স্কুলগুলিতে ডক দেখুন )।

বেশিরভাগ ক্ষেত্রে এটি সর্বোত্তম উপায় হবে, উদাহরণস্বরূপ, পুরোপুরি কেন্দ্রিক ভাসমান মডেল ডায়ালগটি প্রদর্শন করা। এটি আপনাকে উইন্ডোতে অবস্থানগুলি গণনা করতে দেয়, কোনও রেজোলিউশন ওরিয়েন্টেশন বা উইন্ডো আকার ব্রাউজারটি ব্যবহার করছে তা বিবেচনা করে না।

Comments

ডাব্লু 3 স্কুল অনুসারে এটি IE8 বা ie7 এ সমর্থিত নয়। এছাড়াও, আপনি w3 স্কুলগুলিতে লিঙ্ক করার সময় অবশ্যই নজর রাখা উচিত watch মেটা.স্ট্যাকেক্সেঞ্জাওয়েজ.কম

— 67/678৮/২

Answer 7

function wndsize(){
  var w = 0;var h = 0;
  //IE
  if(!window.innerWidth){
    if(!(document.documentElement.clientWidth == 0)){
      //strict mode
      w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
    } else{
      //quirks mode
      w = document.body.clientWidth;h = document.body.clientHeight;
    }
  } else {
    //w3c
    w = window.innerWidth;h = window.innerHeight;
  }
  return {width:w,height:h};
}
function wndcent(){
  var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
  var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
  //IE
  if(!window.pageYOffset){
    //strict mode
    if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
    //quirks mode
    else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
    //w3c
    else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
    return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');

Answer 8

"কনসোল" ব্যবহার করে বা "পরিদর্শন করুন" ক্লিক করার পরে কোনও ওয়েবসাইটের আপনার বর্তমান লোড পৃষ্ঠার উচ্চতা এবং প্রস্থ পরীক্ষা করতে ।

ধাপ 1 : মাউসের ডান বোতামটি ক্লিক করুন এবং 'পরিদর্শন করুন' এ ক্লিক করুন এবং তারপরে 'কনসোল' ক্লিক করুন

ধাপ ২ : আপনার ব্রাউজারের স্ক্রিনটি 'সর্বাধিক' মোডে না থাকা উচিত তা নিশ্চিত করুন। যদি ব্রাউজারের স্ক্রিনটি 'ম্যাক্সিমাইজ' মোডে থাকে তবে আপনাকে প্রথমে ম্যাক্সিমাইজ বোতামটি (ডান বা বাম দিকের কোণায় উপস্থিত) ক্লিক করতে হবে এবং এটি সর্বাধিক সীমাবদ্ধ করতে হবে।

পদক্ষেপ 3 : এখন, চিহ্ন ('>') এর চেয়ে বড়টির পরে নিম্নলিখিতটি লিখুন

       > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)

Comments

কেন এটি নির্বাচিত উত্তর নয়?

— আইলিয়ান ওনোফ্রেই

@ ইলিয়ানঅনফ্রেই কারণ এটি প্রশ্নের মূল সেটটির পুরো উত্তর দেয় না। কৌতুক সত্তা, এটি আমার জন্য সঠিক উত্তর।

— ছিনিয়ে নিন

ইনওরউইথ এবং ইনারহাইটটি কেবলমাত্র ভিউপোর্ট স্কেল 1 হলে সঠিক হয় এটি ডিফল্ট তবে সিএসএস ট্রান্সফর্ম ব্যবহার করে অজান্তেই এটি পরিবর্তন করা যেতে পারে।

— ভিক্টর Stoddard

"স্ক্রিন.উইথথ" এর বিপরীতে "উইন্ডো.ইন.ইউইথথ" ব্যবহারকারীর ব্রাউজারের আকার নির্ধারণ করতে আমার পক্ষে কাজ করেছে - আপনাকে ধন্যবাদ!

— কেভিন পাজাক

Answer 9

আপনি নথিতে প্রস্থ ও উচ্চতা (জন্য সত্যিই একটি বুলেটপ্রুফ সমাধান প্রয়োজন pageWidthএবং pageHeightছবিতে), আপনি খনি একটি প্লাগ-ইন ব্যবহার করে, বিবেচনা করতে পারে jQuery.documentSize ।

এর কেবল একটি উদ্দেশ্য রয়েছে: jQuery এবং অন্যান্য পদ্ধতি ব্যর্থ হলে এমন পরিস্থিতিতেও সর্বদা সঠিক ডকুমেন্টের আকার ফিরিয়ে দেওয়া । এর নাম সত্ত্বেও, আপনাকে অগত্যা jQuery ব্যবহার করতে হবে না - এটি ভ্যানিলা জাভাস্ক্রিপ্টে লিখিত এবং jQuery ছাড়াই কাজ করে করে।

ব্যবহার:

var w = $.documentWidth(),
    h = $.documentHeight();

বিশ্বব্যাপী জন্য document। অন্যান্য নথিগুলির জন্য, যেমন একটি এম্বেড থাকা আইফ্রেমে আপনার অ্যাক্সেস রয়েছে, নথিকে পরামিতি হিসাবে পাস করুন:

var w = $.documentWidth( myIframe.contentDocument ),
    h = $.documentHeight( myIframe.contentDocument );

আপডেট: এখন উইন্ডো মাত্রা জন্য

সংস্করণ ১.১.০ থেকে, jQuery.docamentSize উইন্ডোর মাত্রাও পরিচালনা করে।

কারণ এটি প্রয়োজনীয়

• $( window ).height()অযথা হ'ল আইওএস- এ বগি
• $( window ).width()এবং $( window ).height()হয় মোবাইলে অবিশ্বস্ত কারণ তারা মোবাইল জুম প্রভাব হ্যান্ডেল না।

jQuery.docamentSize সরবরাহ করে $.windowWidth()এবং $.windowHeight(), যা এই সমস্যাগুলি সমাধান করে। আরও জন্য, দয়া করে ডকুমেন্টেশন দেখুন ।

Comments

VM2859: 1 অচেনা ঘরোয়া ধারণা: ক্রস-অরিজিন ফ্রেমে অ্যাক্সেস করা থেকে " লোকালহোস্ট: 12999 " সম্বলিত একটি ফ্রেম ব্লক করেছে Blocked (…) এটি আসার কোনও উপায় আছে কি ???

— fizmhd

আপনি অন্য ডোমেন থেকে আইফ্রেমে অ্যাক্সেস করতে পারবেন না, এটি একই-উত্স নীতি লঙ্ঘন করে । পরীক্ষা করে দেখুন এই উত্তর ।

— হ্যাশচেঞ্জ

আপনি যদি কোনও iframe এম্বেড করে এবং ভিউ পোর্টটির উচ্চতা পাওয়ার চেষ্টা করছেন তবে এটি কাজ করছে না। উইন্ডো.ইন.ইইটি ডকুমেন্টের উচ্চতার সমান যা বগি। আপনি ফ্রেম অ্যাক্সেস করতে পারবেন না। অন্য কোনও ডোমেন থেকে এটি কোনও সম্ভাব্য সমাধান নয়।

— এমআলসৌদ

@ এমআলসউদ প্রদত্ত যদি আপনার আইফ্রেমে অ্যাক্সেস থাকে (কোনও সিওআরএস লঙ্ঘন হয় না), এটি কাজ করে এবং পরীক্ষার স্যুট দ্বারা আচ্ছাদিত থাকে। এই বাক্য গঠন ব্যবহার করুন । এটি একে অপরের অভ্যন্তরে বাসা বেধে একাধিক আইফ্রেমে কাজ করে - কোডেপেনে এই উদাহরণটি দেখুন । যদি আপনার সেটআপটি সাধারণত কাজ করে তবে একটি নির্দিষ্ট নির্দিষ্ট ব্রাউজারে ব্যর্থ হয় তবে এটি সম্ভবত এমন একটি বাগ হতে পারে যা আমি অবগত নই। সম্ভবত আপনি এই ক্ষেত্রে একটি সমস্যা খুলতে পারেন? ধন্যবাদ।

— হ্যাশচেঞ্জ

Answer 10

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

এখানে আপনি কীভাবে একটি বুকমার্কলেট https://en.wikedia.org/wiki/Bookmarklet ব্যবহার করবেন সে সম্পর্কিত তথ্য পাবেন

বুকমার্কলেট

javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

আসল কোড

মূল কোডটি কফিতে রয়েছে:

(->
  addWindowSize = ()->
    style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
    $windowSize = $('<div style="' + style + '"></div>')

    getWindowSize = ->
      '<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'

    $windowSize.html getWindowSize()
    $('body').prepend $windowSize
    $(window).resize ->
      $windowSize.html getWindowSize()
      return

  if !($ = window.jQuery)
    # typeof jQuery=='undefined' works too
    script = document.createElement('script')
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
    script.onload = addWindowSize
    document.body.appendChild script
  else
    $ = window.jQuery
    addWindowSize()
)()

মূলত কোডটি একটি ছোট্ট ডিভের প্রস্তুতি নিচ্ছে যা আপনি যখন আপনার উইন্ডোর আকার পরিবর্তন করবেন তখন আপডেট হয়।

Answer 11

কিছু ক্ষেত্রে প্রতিক্রিয়াশীল বিন্যাসের সাথে সম্পর্কিত এমন $(document).height()ভুল ডেটা ফিরে আসতে পারে যা কেবল পোর্টের উচ্চতা দেখায়। উদাহরণস্বরূপ যখন কিছু ডিভ # র‌্যাপারের উচ্চতা থাকে: 100%, এটি # র‌্যাপারের ভিতরে কিছু ব্লক দিয়ে প্রসারিত করা যায়। তবে এটির উচ্চতাটি ভিউপোর্টের উচ্চতার মতো হবে। এই পরিস্থিতিতে আপনি ব্যবহার করতে পারেন

$('#wrapper').get(0).scrollHeight

যা মোড়কের আসল আকারের প্রতিনিধিত্ব করে।

Comments

শত শত উত্সাহ সহ অনেক উত্তর তবে কেবল এটিই কার্যকর ছিল।

— নাকিলন

Answer 12

স্ক্রিন মাপ সম্পর্কিত সম্পূর্ণ গাইড

জাভাস্ক্রিপ্ট

উচ্চতার জন্য:

document.body.clientHeight  // Inner height of the HTML document body, including padding 
                            // but not the horizontal scrollbar height, border, or margin

screen.height               // Device screen height (i.e. all physically visible stuff)
screen.availHeight          // Device screen height minus the operating system taskbar (if present)
window.innerHeight          // The current document's viewport height, minus taskbars, etc.
window.outerHeight          // Height the current window visibly takes up on screen 
                            // (including taskbars, menus, etc.)

দ্রষ্টব্য: উইন্ডোটি সর্বাধিক করা হয়ে গেলে এটি স্ক্রিনের সমান হবে avভাইলহাইট

প্রস্থের জন্য:

document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width                // Device screen width (i.e. all physically visible stuff)
screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth           // The outer window width (including vertical scroll bar,
                            // toolbars, etc., includes padding and border but not margin)

jQuery

উচ্চতার জন্য:

$(document).height()    // Full height of the HTML page, including content you have to 
                        // scroll to see

$(window).height()      // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.                         

প্রস্থের জন্য:

$(document).width()     // The browser viewport width, minus the vertical scroll bar
$(window).width()       // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)

রেফারেন্স: https://help.optimizely.com/ বিল্ড_ ক্যাম্পেইন_আর_অ্যাক্সিমারিমেন্টস / ইউজ_স্ক্রিন_ম্যাসমেন্টস_ টো_ডিজাইন_ফ_সেসপনসিভ_ব্রেক পয়েন্টস

Answer 13

ডেস্কটপ এবং মোবাইল ব্রাউজারগুলির জন্য আসল ভিউপোর্টের আকারটি জানার জন্য আমি একটি লাইব্রেরি তৈরি করেছি, কারণ ভিউপোর্টের আকারগুলি ডিভাইসগুলির মধ্যে বিপরীত এবং post পোস্টের সমস্ত উত্তরের উপর নির্ভর করতে পারে না (আমি এই বিষয়ে করা সমস্ত গবেষণা অনুসারে): https: // github .com / pyrsmk / ওয়াট

Answer 14

উইন্ডো এবং অভ্যন্তরীণ সামগ্রীর পুনরায় আকার দেওয়ার সময় কখনও কখনও আপনাকে প্রস্থ / উচ্চতার পরিবর্তনগুলি দেখতে হবে।

তার জন্য আমি একটি ছোট স্ক্রিপ্ট লিখেছি যা একটি লগ বক্স যুক্ত করে যা সমস্ত আকার পরিবর্তন এবং প্রায় তাত্ক্ষণিকভাবে আপডেটগুলি গতিশীলভাবে পর্যবেক্ষণ করে।

এটি স্থির অবস্থান এবং উচ্চ জেড-সূচক সহ একটি বৈধ এইচটিএমএল যুক্ত করে, তবে যথেষ্ট ছোট, তাই আপনি এটি করতে পারেন :

• এটি একটি আসল সাইটে ব্যবহার করুন
• মোবাইল / প্রতিক্রিয়াশীল ভিউ পরীক্ষা করার জন্য এটি ব্যবহার করুন

পরীক্ষিত: ক্রোম 40, আই 11, তবে অন্যান্য / পুরানো ব্রাউজারগুলিতেও এটি কাজ করা অত্যন্ত সম্ভব ... :)

  function gebID(id){ return document.getElementById(id); }
  function gebTN(tagName, parentEl){ 
     if( typeof parentEl == "undefined" ) var parentEl = document;
     return parentEl.getElementsByTagName(tagName);
  }
  function setStyleToTags(parentEl, tagName, styleString){
    var tags = gebTN(tagName, parentEl);
    for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
  }
  function testSizes(){
    gebID( 'screen.Width' ).innerHTML = screen.width;
    gebID( 'screen.Height' ).innerHTML = screen.height;

    gebID( 'window.Width' ).innerHTML = window.innerWidth;
    gebID( 'window.Height' ).innerHTML = window.innerHeight;

    gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
    gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;

    gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
    gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;  
  }

  var table = document.createElement('table');
  table.innerHTML = 
       "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
      +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
      +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
      +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
      +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
  ;

  gebTN("body")[0].appendChild( table );

  table.setAttribute(
     'style',
     "border: 2px solid black !important; position: fixed !important;"
     +"left: 50% !important; top: 0px !important; padding:10px !important;"
     +"width: 150px !important; font-size:18px; !important"
     +"white-space: pre !important; font-family: monospace !important;"
     +"z-index: 9999 !important;background: white !important;"
  );
  setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
  setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");

  table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );

  setInterval( testSizes, 200 );

সম্পাদনা করুন: এখন স্টাইলগুলি কেবল লগার টেবিল উপাদানগুলিতে প্রয়োগ করা হয় - সমস্ত টেবিলের জন্য নয় - এছাড়াও এটি একটি জিক্যুরি মুক্ত সমাধান :)

Answer 15

সাথে পরিচয় করিয়ে দেয়ার globalThisমধ্যে ES2020 তোমার মত বৈশিষ্ট্য ব্যবহার করতে পারেন।

পর্দার আকারের জন্য:

globalThis.screen.availWidth 
globalThis.screen.availHeight

উইন্ডো আকারের জন্য

globalThis.outerWidth
globalThis.outerHeight

অফসেটের জন্য:

globalThis.pageXOffset
globalThis.pageYOffset

...& শীঘ্রই.

alert("Screen Width: "+ globalThis.screen.availWidth +"\nScreen Height: "+ globalThis.screen.availHeight)

Answer 16

আপনি স্ক্রিন ব্যবহার করতে পারেন পেতে আপনি অবজেক্টটি ।

এটি কী ফিরে আসবে তার উদাহরণ নিম্নলিখিত:

Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

আপনার screenWidthভেরিয়েবলটি পেতে , কেবল screen.widthএকই সাথে ব্যবহার করুন screenHeight, আপনি কেবল ব্যবহার করবেনscreen.height ।

আপনার উইন্ডো প্রস্থ এবং উচ্চতা পেতে, এটি হবে screen.availWidthবাscreen.availHeight যথাক্রমে।

জন্য pageXএবং pageYভেরিয়েবল, ব্যবহার window.screenX or Y। মনে রাখবেন যে এটি আপনার বাম / শীর্ষস্থানীয় স্ক্রিনের খুব বাম / শীর্ষ থেকে । সুতরাং আপনার যদি প্রস্থের দুটি স্ক্রিন থাকে 1920তবে ডান পর্দার বাম দিক থেকে একটি উইন্ডো 500px এর একটি এক্স মান 2420(1920 + 500) হবে।screen.width/heightতবে, বর্তমান পর্দার প্রস্থ বা উচ্চতা প্রদর্শন করুন।

আপনার পৃষ্ঠার প্রস্থ এবং উচ্চতা পেতে jQuery এর $(window).height()বা ব্যবহার করুন$(window).width() ।

আবার jQuery এর, ব্যবহার ব্যবহার $("html").offset().topএবং $("html").offset().leftআপনার জন্য pageXএবং pageYমান।

Answer 17

এখানে আমার সমাধান!

// innerWidth
const screen_viewport_inner = () => {
    let w = window,
        i = `inner`;
    if (!(`innerWidth` in window)) {
        i = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${i}Width`],
        height: w[`${i}Height`]
    }
};


// outerWidth
const screen_viewport_outer = () => {
    let w = window,
        o = `outer`;
    if (!(`outerWidth` in window)) {
        o = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${o}Width`],
        height: w[`${o}Height`]
    }
};

// style
const console_color = `
    color: rgba(0,255,0,0.7);
    font-size: 1.5rem;
    border: 1px solid red;
`;



// testing
const test = () => {
    let i_obj = screen_viewport_inner();
    console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
    let o_obj = screen_viewport_outer();
    console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};

// IIFE
(() => {
    test();
})();

Comments

! স্ক্রিন-ওকে

Answer 18

আমি কীভাবে প্রতিক্রিয়া জেএস প্রকল্পে স্ক্রিনের প্রস্থ লাভ করতে পেরেছি:

প্রস্থটি যদি 1680 এর সমান হয় তবে অন্য 570 ফেরত 200 করুন return

var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

Screen.availWidth