Jquery ব্যবহার করে স্ক্রোলবার ছাড়াই ব্রাউজারের ভিউপোর্টের উচ্চতা এবং প্রস্থ পান?

Question 1

JQuery ব্যবহার না করে আমি কীভাবে ব্রাউজারের ভিউপোর্টের উচ্চতা এবং প্রস্থ পেতে পারি?

আমি এখন পর্যন্ত যা চেষ্টা করেছি তা এখানে:

       var viewportWidth = $("body").innerWidth();
       var viewportHeight = $("body").innerHeight();

এই সমাধানটি ব্রাউজারের স্ক্রোলবারগুলিকে বিবেচনা করে না।

Question 2

$(window).height();
$(window).width();

অধিক তথ্য

তবে এই মানগুলি পাওয়ার জন্য jQuery ব্যবহার করা অত্যাবশ্যক নয়। ব্যবহার

document.documentElement.clientHeight;
document.documentElement.clientWidth;

স্ক্রোলবারগুলি বাদ দিয়ে মাপ পেতে, বা

window.innerHeight;
window.innerWidth;

স্ক্রোলবারগুলি সহ পুরো ভিউপোর্টটি পেতে।

document.documentElement.clientHeight <= window.innerHeight;  // is always true

Question 3

JQuery ব্যবহার করবেন না, সঠিক ফলাফলের জন্য কেবল জাভাস্ক্রিপ্ট ব্যবহার করুন:

এর মধ্যে স্ক্রোলবার প্রস্থ / উচ্চতা রয়েছে:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);

স্নিপেট প্রসারিত করুন

এটি স্ক্রোলবার প্রস্থ / উচ্চতা বাদ দেয়:

var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;

alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is:' + heightWithoutScrollbar);

স্নিপেট প্রসারিত করুন

Question 4

এখানে একটি জেনেরিক জেএস রয়েছে যা বেশিরভাগ ব্রাউজারে কাজ করা উচিত (এফএফ, সিআর, আই 6 +):

var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
    viewportHeight = document.body.clientHeight;
    viewportWidth = document.body.clientWidth;
} else {
    viewportHeight = document.documentElement.clientHeight;
    viewportWidth = document.documentElement.clientWidth;
}

Question 5

আপনি ভুল পদ্ধতি কল ব্যবহার করছেন। একটি ভিউপোর্ট হ'ল "উইন্ডো" যা নথিতে খোলা: আপনি এর কতটুকু দেখতে পারবেন এবং কোথায়।

ব্যবহার করা $(window).height()আপনাকে ভিউপোর্টের আকার দেয় না এটি আপনাকে পুরো উইন্ডোর আকার দেয় যা সাধারণত পুরো দস্তাবেজের আকার হলেও ডকুমেন্টটি আরও বড় হতে পারে।

প্রকৃত ভিউপোর্টের আকার window.innerHeightএবং ব্যবহার করতে window.innerWidth।

https://gist.github.com/bohman/1351439

JQuery পদ্ধতিগুলি ব্যবহার করবেন না $(window).innerHeight(), যেমন এগুলি ভুল নম্বর দেয়। তারা আপনাকে জানালার উচ্চতা দেয় না innerHeight।

Question 6

বর্ণনা

নিম্নলিখিতটি আপনাকে ব্রাউজারগুলির ভিউপোর্টের আকার দেবে।

নমুনা

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

অধিক তথ্য

Question 7

কাইলের পরামর্শ অনুসারে, আপনি এইভাবে স্ক্রোল বারগুলির আকার বিবেচনা না করে ক্লায়েন্ট ব্রাউজারের ভিউপোর্টের আকারটি পরিমাপ করতে পারবেন।

নমুনা (স্ক্রোল বার ছাড়া ভিউপোর্টের মাত্রা)

// First you forcibly request the scroll bars to hidden regardless if they will be needed or not.
$('body').css('overflow', 'hidden');

// Take your measures.
// (These measures WILL NOT take into account scroll bars dimensions)
var heightNoScrollBars = $(window).height();
var widthNoScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

বিকল্পভাবে আপনি যদি স্ক্রোল বারগুলির আকার বিবেচনায় নেওয়ার সময় ক্লায়েন্ট ভিউপোর্টের মাত্রাগুলি সন্ধান করতে চান তবে এই নমুনাটি আপনাকে সেরা মানায়।

পরিমাপটি সঠিক কিনা তা নিশ্চিত করার জন্য প্রথমে আপনার বডি ট্যাগটি 100% প্রস্থ এবং উচ্চতাতে সেট করতে ভুলবেন না।

body { 
width: 100%; // if you wish to measure the width and take into account the horizontal scroll bar.
height: 100%; // if you wish to measure the height while taking into account the vertical scroll bar.
}

নমুনা (স্ক্রোল বারগুলির সাথে ভিউপোর্টের মাত্রা)

// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');

// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

Question 8

স্ক্রিপ্টটি $(window).height()ভালভাবে কাজ করে (ভিউপোর্টের উচ্চতা এবং স্ক্রোলিং উচ্চতার সাথে দস্তাবেজটি দেখায় না), তবে এটি আপনার ডকুমেন্টে ডকটাইপ ট্যাগকে সঠিকভাবে স্থাপন করা দরকার, উদাহরণস্বরূপ এই ডক্টাইপগুলি:

এইচটিএমএল 5 এর জন্য: <!doctype html>

ট্রানজিশনাল এইচটিএমএল 4 এর জন্য: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

সম্ভবত কিছু ব্রাউজার দ্বারা ধরে নেওয়া ডিফল্ট ডক্টাইপটি এমন, $(window).height()এটি নথির উচ্চতা নেয় এবং ব্রাউজারের উচ্চতা নয় not ডক্টাইপ স্পেসিফিকেশন সহ, এটি সন্তোষজনকভাবে সমাধান করা হয়েছে, এবং আমি নিশ্চিত যে আপনি পিপস "লুকানো এবং তারপরে ফিরে স্ক্রোল-ওভারফ্লো পরিবর্তন" এড়াবেন, যা, দুঃখিত, কিছুটা নোংরা কৌশল, বিশেষত যদি আপনি না করেন তবে ' ভবিষ্যতে প্রোগ্রামার ব্যবহারের জন্য কোডটিতে টি নথিভুক্ত করুন।

তদুপরি, আপনি যদি কোনও স্ক্রিপ্ট করছেন, আপনি আপনার গ্রন্থাগারে প্রোগ্রামারদের সাহায্যের জন্য পরীক্ষাগুলি আবিষ্কার করতে পারেন, আমাকে একটি দম্পতি আবিষ্কার করতে দিন:

$(document).ready(function() {
    if(typeof $=='undefined') {
        alert("Error, you haven't called JQuery library");
    }
    if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
    } 
});

Question 9

$(document).ready(function() {

  //calculate the window height & add css properties for height 100%

  wh = $( window ).height();

  ww = $( window ).width();

  $(".targeted-div").css({"height": wh, "width": ww});

});

Question 10

JQuery ব্যবহার করা হচ্ছে ...

document (দস্তাবেজ)। উচ্চতা () এবং window (উইন্ডো)। উচ্চতা () একই মানগুলি ফিরিয়ে দেবে ... কীটি হ'ল শরীরের প্যাডিং এবং মার্জিন পুনরায় সেট করা যাতে আপনি কোনও স্ক্রোলিং না পান।

<!--

body {
    padding: 0px;
    margin: 0px;
    position: relative;
}

-->

আশাকরি এটা সাহায্য করবে.

Question 11

প্রস্থের স্ক্রিন এবং ছোট পর্দার জন্য আমি আমার ওয়েবসাইটের আলাদা চেহারা চেয়েছিলাম। আমি 2 টি সিএসএস ফাইল তৈরি করেছি। জাভাতে আমি 2 টি সিএসএস ফাইলের মধ্যে যা স্ক্রিনের প্রস্থের উপর নির্ভর করে ব্যবহৃত হয় তা চয়ন করি। আমি কিছু জাভাস্ক্রিপ্ট- ফাংশন echoদিয়ে পিএইচপি ফাংশন ব্যবহার করি echo।

আমার <header>পিএইচপি-ফাইলের বিভাগে আমার কোড :

<?php
echo "
<script>
    if ( window.innerWidth > 400)
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018.css\" rel=\"stylesheet\" type=\"text/css\">'); }
    else
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018small.css\" rel=\"stylesheet\" type=\"text/css\">'); }
</script>
"; 
?>