javascript পর্দার আকার, বর্তমান ওয়েব পেজ এবং ব্রাউজার উইন্ডো পান




8 Answers

এই সবকিছু আপনার জানা প্রয়োজন:

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

কিন্তু সংক্ষিপ্ত:

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);

Fiddle

javascript jquery layout cross-browser

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




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

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

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

avail উইড্থ এবং availHeight - স্ক্রীনে উপলব্ধ প্রস্থ এবং উচ্চতা (ওএস টাস্কবার এবং এ ছাড়া)।




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

এটি করার জন্য, ব্যবহার করুন: window.innerWidth এবং window.innerHeight বৈশিষ্ট্য ( w3schools.com/jsref/prop_win_innerheight.asp )।

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




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

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

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

ধাপ 3 : এখন, সাইন ('>') এর চেয়ে বড় পরে নিম্নলিখিতটি লিখুন

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

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



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

এখানে আপনি https://en.wikipedia.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()
)()

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




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




আপনি এই পেতে Screen বস্তু ব্যবহার করতে পারেন।

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

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

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

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

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

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

আবার jQuery ব্যবহার করে, $("html").offset().top এবং $("html").offset().left আপনার pageX এবং পৃষ্ঠা pageY মানগুলির জন্য $("html").offset().left




উইন্ডো নিরাপত্তার জন্য আমরা নিরাপদে একা ব্রাউজারে নেটিভ জাভাস্ক্রিপ্ট উইন্ডো api ব্যবহার করতে পারি।

সিনট্যাক্স কিছুটা বেশ পরিষ্কার!

n = "<i>px</i><br>"  /* separator */
dp = devicePixelRatio /* device zoom level */
body = (() => { document.body.innerHTML = /* ready! */


       "Device zoom level: " +                         dp
+n+    "Screen width: " +                    screen.width 
*dp+n+ "Screen height: "+                   screen.height 
*dp+n+ "Document frame height: " +            innerHeight
*dp+n+ "Document frame width: " +              innerWidth                             *dp+n+ "Parent document height: "+            outerHeight                            *dp+n+ "Parent document width: "+              outerWidth                             *dp+n+ "Window available height: "+    screen.availHeight                     *dp+n+ "Window available width: "+      screen.availWidth                      *dp+n+ "Document frame max scrollable X: "+    scrollMaxX                             *dp+n+ "Document frame max scrollable Y: "+    scrollMaxY
*dp+n+ "Distance from left screen to window: "+   screenX
*dp+n+ "Distance from top screen to window: "+    screenY
*dp+n    

})()

প্রতিটি ব্রাউজার এবং ডিভাইসগুলিতে সঠিক ফলাফল পেতে, ডিভাইসটি PixelRatio দ্বারা গুণিত হওয়া আবশ্যক।

উইন্ডো সম্পত্তি ডিভাইসটি PixelRatio রেজোলিউশনের অনুপাতটি প্রকৃত পিক্সেলগুলিতে বর্তমান ডিসপ্লে ডিভাইসের জন্য CSS পিক্সেলগুলিতে রেজোলিউশনের দিকে ফেরত দেয়। এই মানটিকে পিক্সেল মাপের অনুপাত হিসাবেও ব্যাখ্যা করা যেতে পারে: এক CSS পিক্সেলের আকার একটি শারীরিক পিক্সেলের আকারে। সহজ শর্তে, ব্রাউজারকে একটি সিএসএস পিক্সেল আঁকতে কত স্ক্রীনের প্রকৃত পিক্সেল ব্যবহার করা উচিত তা জানায়।

একটি হাইডিপিআই বা রেটিনা প্রদর্শনের বিপরীতে মান প্রদর্শনের মধ্যে পার্থক্যটি মোকাবেলা করার সময় এটি কার্যকর, যা একই বস্তুগুলি আঁকতে আরও স্ক্রিন পিক্সেল ব্যবহার করে, যার ফলে তীব্র চিত্র হয়।

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

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






Related