ভিউপোর্টের আকার পেতে jQuery ব্যবহার করা


307

ব্রাউজারের ভিউপোর্টের আকার নির্ধারণ করতে এবং পৃষ্ঠাটি পুনরায় আকার দেওয়া হলে এটি পুনরায় বর্জন করতে কীভাবে আমি jQuery ব্যবহার করব? আমাকে এই স্পেসে আইএফআরএম আকার তৈরি করতে হবে (প্রতিটি মার্জিনে কিছুটা সামান্য আসছে)।

যারা জানেন না তাদের জন্য, ব্রাউজারের ভিউপোর্টটি নথি / পৃষ্ঠার আকার নয়। এটি স্ক্রোলের আগে আপনার উইন্ডোটির দৃশ্যমান আকার।


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


1
এটি প্রশ্নের সরাসরি উত্তর নয়, তবে নির্বাচকদের ভিউপোর্টের তুলনায় তাদের অবস্থান ও দৃশ্যমানতা অনুযায়ী পরিচালনা করতে চান তাদের পক্ষে সহায়ক হতে পারে: অ্যাপেলসিনি.এন. / প্রকল্পসমূহ / ভিউপোর্ট (প্লাগইন)
ওয়ালেস সিদ্ধ্রি

উত্তর:


483

ভিউপোর্টের প্রস্থ এবং উচ্চতা পেতে:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

পৃষ্ঠার ইভেন্টটি পুনরায় আকার দিন:

$(window).resize(function() {

});

18
আমি এটি উইন্ডোজ আই 6, আইই 8, এফএফ 3.6.3, গুগল ক্রোম 5.0.375.70, অপেরা 10.53 এবং সাফারি 5.0 (7533.16) এ পরীক্ষা করেছি। এটি এই সমস্তগুলির উপর ধারাবাহিকভাবে কাজ করে। আমি উবুন্টুতে FF3.6.3 পরীক্ষাও করেছি এবং এটি সেখানেও কাজ করে। আমি মনে করি আমি jQuery 1.3 কে ওয়ার্ডপ্রেস ২.৯.২ এর সাথে ব্যবহার করছি, যেখানে এটি কাজ করার জন্য আমার এটির প্রয়োজন ছিল।
ভলমাইক

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

9
আসলে, innerWidth/ innerHeightব্যবহার করা আরও সঠিক (জুম কাভারিং)।

18
হয়তো এই সমস্যার মধ্যে চলছে:: হয়তো আপনার ব্রাউজার উপায় যে আপনি এটা করতে চান আচরণ করা হয় না @FrankSchwieterman stackoverflow.com/q/12103208/923560 । নিশ্চিত করুন যে আপনার HTML ফাইল একটি সঠিক অন্তর্ভুক্ত করুন DOCTYPEঘোষণা, যেমন <!DOCTYPE html>
আব্দুল

21
এটি সম্পূর্ণ ভুল। এটি আপনাকে দস্তাবেজের আকার দেয়, ভিউপোর্ট নয় (দস্তাবেজের দিকে উইন্ডোর আকার)।
মাইক


26

1. মূল প্রশ্নের উত্তর

স্ক্রিপ্টটি $(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 (দস্তাবেজ)। প্রস্তুত (ফাংশন () {

      if(typeof $=='undefined') {
        alert("PROGRAMMER'S Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER'S Error: you haven't installed the UI 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");
      } 

});


সম্পাদনা: অংশ ২ সম্পর্কে, "অ্যাডিশনাল টিপ, নোটটি আলাদা করুন": @ মাচিয়েল, গতকালের মন্তব্যে (2014-09-04) একেবারে ঠিক ছিল: qu এর চেকটি জ্যাকুরির প্রস্তুত ইভেন্টের মধ্যে থাকতে পারে না, কারণ আমরা, যেমন তিনি দেখিয়েছি, ধরে নিচ্ছি already ইতিমধ্যে সংজ্ঞায়িত করা হয়েছে। এটি উল্লেখ করার জন্য ধন্যবাদ, এবং দয়া করে আপনার বাকী পাঠকরা যদি এটি আপনার স্ক্রিপ্টগুলিতে ব্যবহার করেন তবে এটি সংশোধন করুন। আমার পরামর্শটি হ'ল: আপনার লাইব্রেরিতে একটি "ইনস্টল_স্ক্রিপ্ট ()" ফাংশন রাখুন যা গ্রন্থাগারকে সূচনা দেয় (যেমন রেডি ()) এবং এই জাতীয় "ইনস্টল_স্ক্রিপ্ট ()" ফাংশনটি শুরু করার সাথে সাথে এই জাতীয় অনুষ্ঠানের ভিতরে কোনও রেফারেন্স দেয় put , $ সংজ্ঞায়িত করা হয়েছে কিনা তা যাচাই করুন, তবে জিকুয়ারি থেকে সমস্ত কিছু স্বাধীন করুন, যাতে জ্যাকুয়েরি এখনও সংজ্ঞায়িত না হলে আপনার গ্রন্থাগারটি "নিজেকে নির্ধারণ করতে পারে"। আমি একটি সিডিএন থেকে এনে একটি জিকুয়ারি স্বয়ংক্রিয়ভাবে তৈরি করার জন্য জোর না করে এই পদ্ধতিটিকে পছন্দ করি। অন্যান্য প্রোগ্রামারদের সাহায্য করার জন্য সেগুলি ক্ষুদ্র নোটগুলি। আমি মনে করি যেগুলি গ্রন্থাগারগুলি তৈরি করে তাদের অবশ্যই সম্ভাব্য প্রোগ্রামারের ভুলগুলির প্রতিক্রিয়ায় আরও সমৃদ্ধ হতে হবে। উদাহরণস্বরূপ, গুগল এপিসের ত্রুটি বার্তাগুলি বুঝতে একটি স্বতন্ত্র ম্যানুয়াল দরকার। এটি অযৌক্তিক, কিছু ক্ষুদ্র ভুলগুলির জন্য বাহ্যিক ডকুমেন্টেশনগুলির দরকার যা আপনাকে যেতে এবং কোনও ম্যানুয়াল বা কোনও বিশদ বিবরণ অনুসন্ধান করার প্রয়োজন হয় না। গ্রন্থাগারটি অবশ্যই স্ব-ডকুমেন্টেড হতে হবে। আমি এখন থেকে ছয় মাসেরও বেশি সময় ধরে করতে পারি এমন ভুলগুলির যত্ন নিয়ে আমি কোড লিখি এবং এটি এখনও একটি পরিষ্কার এবং পুনরাবৃত্তিমূলক কোড হওয়ার চেষ্টা করে যা ইতিমধ্যে লিখিত-থেকে-প্রতিরোধ-ভবিষ্যত-বিকাশকারী-ভুল হতে পারে। আমি মনে করি যেগুলি গ্রন্থাগারগুলি তৈরি করে তাদের অবশ্যই সম্ভাব্য প্রোগ্রামারের ভুলগুলির প্রতিক্রিয়ায় আরও সমৃদ্ধ হতে হবে। উদাহরণস্বরূপ, গুগল এপিসের ত্রুটি বার্তাগুলি বুঝতে একটি স্বতন্ত্র ম্যানুয়াল দরকার। এটি অযৌক্তিক, কিছু ক্ষুদ্র ভুলগুলির জন্য বাহ্যিক ডকুমেন্টেশনগুলির দরকার যা আপনাকে যেতে এবং কোনও ম্যানুয়াল বা কোনও বিশদ বিবরণ অনুসন্ধান করার প্রয়োজন হয় না। গ্রন্থাগারটি অবশ্যই স্ব-ডকুমেন্টেড হতে হবে। আমি এখন থেকে ছয় মাসেরও বেশি সময় ধরে করতে পারি এমন ভুলগুলির যত্ন নিয়ে আমি কোড লিখি এবং এটি এখনও একটি পরিষ্কার এবং পুনরাবৃত্তিমূলক কোড হওয়ার চেষ্টা করে যা ইতিমধ্যে লিখিত-থেকে-প্রতিরোধ-ভবিষ্যত-বিকাশকারী-ভুল হতে পারে। আমি মনে করি যেগুলি গ্রন্থাগারগুলি তৈরি করে তাদের অবশ্যই সম্ভাব্য প্রোগ্রামারের ভুলগুলির প্রতিক্রিয়ায় আরও সমৃদ্ধ হতে হবে। উদাহরণস্বরূপ, গুগল এপিসের ত্রুটি বার্তাগুলি বুঝতে একটি স্বতন্ত্র ম্যানুয়াল দরকার। এটি অযৌক্তিক, কিছু ক্ষুদ্র ভুলগুলির জন্য বাহ্যিক ডকুমেন্টেশনগুলির দরকার যা আপনাকে যেতে এবং কোনও ম্যানুয়াল বা কোনও বিশদ বিবরণ অনুসন্ধান করার প্রয়োজন হয় না। গ্রন্থাগারটি অবশ্যই স্ব-ডকুমেন্টেড হতে হবে। আমি এখন থেকে ছয় মাসেরও বেশি সময় ধরে করতে পারি এমন ভুলগুলির যত্ন নিয়ে আমি কোড লিখি এবং এটি এখনও একটি পরিষ্কার এবং পুনরাবৃত্তিমূলক কোড হওয়ার চেষ্টা করে যা ইতিমধ্যে লিখিত-থেকে-প্রতিরোধ-ভবিষ্যত-বিকাশকারী-ভুল হতে পারে। t আপনাকে যেতে হবে এবং একটি ম্যানুয়াল বা কোনও বিশদ অনুসন্ধান করতে হবে। গ্রন্থাগারটি অবশ্যই স্ব-ডকুমেন্টেড হতে হবে। আমি এখন থেকে ছয় মাসেরও বেশি সময় ধরে করতে পারি এমন ভুলগুলির যত্ন নিয়ে আমি কোড লিখি এবং এটি এখনও একটি পরিষ্কার এবং পুনরাবৃত্তিমূলক কোড হওয়ার চেষ্টা করে যা ইতিমধ্যে লিখিত-থেকে-প্রতিরোধ-ভবিষ্যত-বিকাশকারী-ভুল হতে পারে। t আপনাকে যেতে হবে এবং একটি ম্যানুয়াল বা কোনও বিশদ অনুসন্ধান করতে হবে। গ্রন্থাগারটি অবশ্যই স্ব-ডকুমেন্টেড হতে হবে। আমি এখন থেকে ছয় মাসেরও বেশি সময় ধরে করতে পারি এমন ভুলগুলির যত্ন নিয়ে আমি কোড লিখি এবং এটি এখনও একটি পরিষ্কার এবং পুনরাবৃত্তিমূলক কোড হওয়ার চেষ্টা করে যা ইতিমধ্যে লিখিত-থেকে-প্রতিরোধ-ভবিষ্যত-বিকাশকারী-ভুল হতে পারে।


2
আপনার পোস্ট পড়া খুব কঠিন। দয়া করে আপনার পোস্টটি আবার করুন যাতে আপনি সবার মতো স্ট্যাক এক্সচেঞ্জ মার্কডাউনে অভ্যস্ত হন । আছে একটি কারণ কেন StackExchange সাইট TinyMCE ব্যবহার করবেন না , কিন্তু যদি আপনি এটি দিয়ে একটি পেট কামড়ানো আছে, জড়িত মেটা
ভলমাইক

এটি কিছুটা অদ্ভুত যে $আপনি ইতিমধ্যে $কলটি ব্যবহার করার পরে এর প্রাপ্যতাটি পরীক্ষা করে দেখুন $(document).ready(function() { } );। আপনি যদি jQuery উপলব্ধ কিনা তা পরীক্ষা করে দেখাই ভাল তবে এই মুহুর্তে এটি ইতিমধ্যে অনেক দেরিতে।
মাচিয়েল

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

এটিই আসল উত্তর হওয়া উচিত! ধন্যবাদ!
জাস্টিন টি। ওয়াটস

6

ভিউপোর্টটি পুনরায় আকার দেওয়া হয়েছে কিনা তা সনাক্ত করতে আপনি $ (উইন্ডো) .resize () ব্যবহার করতে পারেন।

যখন উপস্থিত রয়েছে একটি স্ক্রোল বার উপস্থিত রয়েছে তখন ভিউপোর্টের সঠিক প্রস্থ এবং উচ্চতা [1] ধারাবাহিকভাবে সনাক্ত করতে jQuery এর কোনও ফাংশন নেই।

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

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

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

আমার উত্তর সম্ভবত প্রতিটি পক্ষের একটি মার্জিনের সাথে একটি ইফ্র্যামিকে 100% ভিউপোর্ট প্রস্থের আকার পরিবর্তন করতে সহায়তা করবে না, তবে আমি আশা করি এটি জাভাস্ক্রিপ্ট ভিউপোর্টের প্রস্থ এবং উচ্চতার গণনার ব্রাউজারের অসঙ্গতিতে হতাশ ওয়েবপ্রেমকদের জন্য সান্ত্বনা দেবে।

সম্ভবত এটি আইফ্রেমের সাথে সম্মতিতে সহায়তা করতে পারে:

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] আপনি একটি নম্বর পেতে $ (উইন্ডো)। প্রস্থ () এবং $ (উইন্ডো)। উচ্চতা () ব্যবহার করতে পারেন যা কিছু ব্রাউজারে সঠিক হবে তবে অন্যটিতে ভুল rect এই ব্রাউজারগুলিতে আপনি সঠিক প্রস্থ এবং উচ্চতা পাওয়ার জন্য উইন্ডো.নাইনারউইথ এবং উইন্ডো।

সাধারণত বিভিন্ন ব্রাউজারগুলি উইন্ডোটির প্রস্থ এবং উচ্চতার অংশ হিসাবে স্ক্রোলবারকে অন্তর্ভুক্ত করে কিনা তা সম্পর্কে অসঙ্গতিপূর্ণ।

দ্রষ্টব্য: একই ব্রাউজার ব্যবহার করে অপারেটিং সিস্টেমের মধ্যে উভয় window (উইন্ডো)। প্রস্থ () এবং উইন্ডো.innerwidth পৃথক হয়। দেখুন: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238


4
function showViewPortSize(display) {
    if (display) {
        var height = window.innerHeight;
        var width = window.innerWidth;
        jQuery('body')
            .prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: ' + height + '<br>Width: ' + width + '</div>');
        jQuery(window)
            .resize(function() {
                height = window.innerHeight;
                width = window.innerWidth;
                jQuery('#viewportsize')
                    .html('Height: ' + height + '<br>Width: ' + width);
            });
    }
}
$(document)
    .ready(function() {
        showViewPortSize(true);
    });

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

প্রস্থের জন্য দুর্দান্ত!
মার্ক

2

উপর ভিউপোর্ট আকার পেতে লোড এবং এর পুনরায় আকার দেওয়ার (SimaWB প্রতিক্রিয়া উপর ভিত্তি করে):

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});

1

দয়া করে নোট করুন যে CSS3 ভিউপোর্ট ইউনিটগুলি (ভিএইচ, ভিডাব্লু) আইওএসে ভাল খেলবে না আপনি যখন পৃষ্ঠাটি স্ক্রোল করবেন তখন ভিউপোর্টের আকারটি কোনওভাবে পুনরায় গণনা করা হয় এবং ভিউপোর্ট ইউনিট ব্যবহার করে এমন উপাদানগুলির আকারও বৃদ্ধি পায়। সুতরাং, আসলে কিছু জাভাস্ক্রিপ্ট প্রয়োজন।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.