window (উইন্ডো)। প্রস্থ () মিডিয়া ক্যোয়ারির মতো নয়

186

আমি একটি প্রকল্পে টুইটার বুটস্ট্র্যাপ ব্যবহার করছি। ডিফল্ট বুটস্ট্র্যাপ শৈলীর পাশাপাশি আমি নিজের কিছু যুক্ত করেছি

//My styles
@media (max-width: 767px)
{
    //CSS here
}

ভিউপোর্টের প্রস্থ যখন 767px কম হয় তখন আমি পৃষ্ঠায় নির্দিষ্ট উপাদানের ক্রম পরিবর্তন করতে jQuery ব্যবহার করছি। 

$(document).load($(window).bind("resize", checkPosition));

function checkPosition()
{
    if($(window).width() < 767)
    {
        $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
    } else {
        $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
    }
}

আমার যে সমস্যাটি হচ্ছে তা হ'ল $(window).width()সিএসএস দ্বারা গণনা করা প্রস্থ এবং প্রস্থের গণনাটি একই রকম মনে হচ্ছে না। যখন $(window).width()767 ফেরত দেয় তখন সিএসএস এটিকে ভিউপোর্টের প্রস্থ 751 হিসাবে গণনা করে তাই কোনও 16px আলাদা বলে মনে হয়।

কেউ কি জানেন যে এর কারণ কী এবং আমি কীভাবে সমস্যার সমাধান করতে পারি? লোকেরা পরামর্শ দিয়েছে যে স্ক্রোলবারের প্রশস্ততা বিবেচনায় নেওয়া হচ্ছে না এবং ব্যবহার $(window).innerWidth() < 751করার উপায়। তবে আদর্শভাবে আমি এমন একটি সমাধান খুঁজতে চাই যা স্ক্রোলবারের প্রস্থের গণনা করে এবং এটি আমার মিডিয়া ক্যোয়ারির সাথে সামঞ্জস্যপূর্ণ (যেমন উভয় শর্তগুলি মান 676767 এর বিপরীতে পরীক্ষা করছে)। কারণ অবশ্যই সমস্ত ব্রাউজারে 16px এর স্ক্রোলবার প্রস্থ থাকবে না?

jquery  css  twitter-bootstrap  media-queries 
— Pattle
সূত্র
1
('(' Html ')। প্রস্থ () <= 767) {// কিছু করুন
— something
@ ভাইবস_কুল এই পরামর্শের জন্য ধন্যবাদ তবে আমি এখনও একই ফল পেয়েছি
— প্যাটল
— 23
: আমি এখানে উত্তর [1] [1] [লিঙ্ক এখানে বর্ণনা লিখুন] stackoverflow.com/questions/11309859/...
— Rantiev
আপনি কীভাবে এটি কাজ করতে চান তা "" ডকুমেন্ট.ডোকমেন্টএলেন্ট.ক্লিয়েন্টউইথ "(" $ (উইন্ডো) এর পরিবর্তে। প্রস্থ () ") কী কাজ করে? সম্পাদনা: আমার ভুল, সবেমাত্র ভাইবস_কুলের উত্তর দেখেছি।
— জোশান্ট

উত্তর:

293

আপনার যদি আইই 9 সমর্থন করতে না হয় তবে আপনি কেবল window.matchMedia()( এমডিএন ডকুমেন্টেশন ) ব্যবহার করতে পারেন ।

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

window.matchMediaসিএসএস মিডিয়া প্রশ্নের সাথে সম্পূর্ণ সুসংগত এবং ব্রাউজার সমর্থনটি বেশ ভাল: http://caniuse.com/#feat=matchmedia

হালনাগাদ:

আপনার যদি আরও ব্রাউজার সমর্থন করতে হয় তবে আপনি মডার্নিজারের এমকিউ পদ্ধতি ব্যবহার করতে পারেন , এটি CSS এ মিডিয়া কোয়েরি বোঝে এমন সমস্ত ব্রাউজার সমর্থন করে।

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}
— ausi
সূত্র
8
আপনি যদি মডার্নিজার লাইব্রেরিটি ব্যবহার করতে সক্ষম হন তবে এটি সর্বোত্তম উত্তর out
— সমৃদ্ধ
1
এই সমাধানটি আরও ভাল: stackoverflow.com/a/19292035/1136132 (২ য় কোড)। কেবল জেএস।
— joseantgv
@ জোস্যান্টজিভি আমার সমাধানটিও কেবল জেএস-এর। আপনি যে সমস্যার সমাধান করেছেন তার সমাধান কেন ভাল?
— অসি
2
@ এডওয়ার্ডম Modernizr.mqকেবল একটি বুলিয়ান মান দেয়, তাই আপনাকে onresizeইভেন্ট হ্যান্ডলারে নিজেকে এটি কল করতে হবে ।
— অশি
2
@Bernig window.matchMediaকারণ এটি একটি ট্রিগার নেই প্রস্তাবিত উপায় হল, রাং , আপনি কত ঘন ঘন ফাংশন কল এই একটি কার্যকারিতা সমস্যা সৃষ্টি করতে পারে উপর নির্ভর করে। আপনি যদি সরাসরি মডার্নিজার ব্যবহার করতে না চান, আপনি src / mq.js এবং src / injectElementWithStyles.js থেকে উত্স কোডটি অনুলিপি করতে পারেন ।
— আউশি
175

মিডিয়া ক্যোয়ারী পরিবর্তিত হয় এমন একটি সিএসএস বিধি পরীক্ষা করুন। এটি সর্বদা কাজ করার গ্যারান্টিযুক্ত।

http://www.fourfront.us/blog/jquery-window-width-and-media-queries

এইচটিএমএল:

<body>
    ...
    <div id="mobile-indicator"></div>
</body>

javascript:

function isMobileWidth() {
    return $('#mobile-indicator').is(':visible');
}

সিএসএস:

#mobile-indicator {
    display: none;
}

@media (max-width: 767px) {
    #mobile-indicator {
        display: block;
    }
}
— পাছা
সূত্র
9
এটি অন্যান্য উত্তরে উল্লিখিত জেএস হ্যাকগুলির চেয়ে আরও মার্জিত সমাধান।
— রেনি রথ
3
+1 এটি কেবল চালাক। আমি পছন্দ করি আপনি যদি ব্রেকআপপয়েন্টগুলি পরিবর্তন করতে চান তবে আপনাকে যা করতে হবে তা হ'ল জাভাস্ক্রিপ্ট নয়, সিএসএস পরিবর্তন করতে হবে।
— JoeMoe1984
এই সমাধানটি সূক্ষ্মভাবে কাজ করে এবং সর্বাধিক ভোটিত উত্তরের প্রস্তাবিত জাভাস্ক্রিপ্ট হ্যাকের চেয়ে আমি এটি আরও মার্জিত বলে মনে করি।
— আন্দ্রেস মেজা-এস্ক্যালান
2
আপনি যদি বুটস্ট্র্যাপ ব্যবহার করেন তবে CSS এর মতো ছাড়াই এটি করতে পারেন<div id="xs-indicator" class="xs-visible">
— Čamo
33

এটি কারণে হতে পারে , পছন্দ পরিবর্তে scrollbarব্যবহার innerWidthকরুনwidth

if($(window).innerWidth() <= 751) {
   $("#body-container .main-content").remove()
                                .insertBefore($("#body-container .left-sidebar"));
} else {
   $("#body-container .main-content").remove()
                                .insertAfter($("#body-container .left-sidebar"));
}

এছাড়াও আপনি viewportমত পেতে পারেন

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' ] };
}

উপরে কোড উত্স

— রোহান কুমার
সূত্র
ধন্যবাদ। এটি কাজ করবে তবে যেভাবেই হোক আমি স্ক্রোলবারের প্রস্থ অন্তর্ভুক্ত করতে jquery ব্যবহার করতে পারি। আমি কেবল ভাবছি যে বিভিন্ন ব্রাউজারে স্ক্রোলবারের প্রস্থ পরিবর্তন হতে পারে?
— পিটল
1
হ্যাঁ ব্যবহার করুন innerWidth()বা আপনি এটি ব্যবহার করতে পারেন $('body').innerWidth();এই স্ট্যাকওভারফ্লোটি
— রোহান কুমার
3
আপনি উইন্ডো.ইনারওয়্যারথ বোঝাতে চেয়েছেন, jQuery $ (উইন্ডো) অবজেক্টে নয়, $ (উইন্ডো)। প্রস্থ () এটিকে ভুলভাবে ফেরত দেয়
— EJanuszewski
1
window.innerWidthওএসএক্স সিস্টেমের পছন্দগুলিতে স্ক্রোলবারগুলি সক্ষম করা থাকলে সাফারি 8-তে সিএসএস মিডিয়া প্রশ্নের সাথে সামঞ্জস্য নেই।
— অসি
4

এটি ডকুমেন্টের প্রস্থের জেএস-স্কোপ না করে আরও ভাল অনুশীলন হতে পারে তবে সিএসএস @ মিডিয়া ক্যোয়ারী দ্বারা কিছুটা পরিবর্তন করা হয়েছে। এই পদ্ধতির সাহায্যে আপনি নিশ্চিত হতে পারেন যে একই সময়ে JQuery ফাংশন এবং CSS পরিবর্তন ঘটে।

CSS:

#isthin {
    display: inline-block;
    content: '';
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media only screen and (max-width: 990px) {
    #isthin {
        display: none;
    }
}

jQuery:

$(window).ready(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

$(window).resize(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});
— gramgram
সূত্র
3

আমি সম্প্রতি একই সমস্যার মুখোমুখি ছিলাম - বুটস্ট্র্যাপ 3 এর সাথেও।

$ .Width () বা $ .nerwidth () আপনার পক্ষে কাজ করবে না।

আমি যে সর্বোত্তম সমাধানটি নিয়ে এসেছি - এবং বিশেষত BS3 অনুসারে তৈরি -
এটি কোনও .containerউপাদানটির প্রস্থ পরীক্ষা করা ।

যেহেতু আপনি সম্ভবত জানেন যে .containerউপাদানটি কীভাবে কাজ করে,
কেবলমাত্র এটিই আপনাকে বিএস সিএসএস বিধি দ্বারা নির্ধারিত বর্তমান প্রস্থকে দেবে।

সুতরাং এটি কিছু মত যায়

bsContainerWidth = $("body").find('.container').width()
if (bsContainerWidth <= 768)
    console.log("mobile");
else if (bsContainerWidth <= 950)
    console.log("small");
else if (bsContainerWidth <= 1170)
    console.log("medium");
else
    console.log("large");
— user3041539
সূত্র
3

ব্যবহার

window.innerWidth

এটি আমার সমস্যার সমাধান করেছে

— user4451021
সূত্র
3

পূর্বে উল্লিখিত পদ্ধতিগুলির একটি বিকল্প এখানে সিএসএসের মাধ্যমে কিছু পরিবর্তন করা এবং জাভাস্ক্রিপ্টের মাধ্যমে পড়ার উপর নির্ভর করে। এই পদ্ধতির প্রয়োজন নেই window.matchMediaবা মডার্নিজার। এটির জন্য কোনও অতিরিক্ত এইচটিএমএল উপাদানও প্রয়োজন নেই। ব্রেকআপপয়েন্ট তথ্য 'স্টোর' করতে এইচটিএমএল সিউডো-এলিমেন্ট ব্যবহার করে এটি কাজ করে:

body:after {
  visibility: hidden;
  height: 0;
  font-size: 0;
}

@media (min-width: 20em) {
  body:after {
    content: "mobile";
  }
}

@media (min-width: 48em) {
  body:after {
    content: "tablet";
  }
}

@media (min-width: 64em) {
  body:after {
    content: "desktop";
  }
}

আমি bodyউদাহরণ হিসাবে ব্যবহার করেছি , আপনি এটির জন্য কোনও HTML উপাদান ব্যবহার করতে পারেন। contentসিউডো-এলিমেন্টের মধ্যে আপনি যে কোনও স্ট্রিং বা নম্বর যুক্ত করতে পারেন । 'মোবাইল' ইত্যাদি হতে হবে না।

এখন আমরা জাভাস্ক্রিপ্ট থেকে এই তথ্যটি নিম্নলিখিত উপায়ে পড়তে পারি:

var breakpoint = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/"/g,'');

if (breakpoint === 'mobile') {
    doSomething();
}

এইভাবে আমরা সর্বদা নিশ্চিত যে ব্রেকআপপয়েন্ট তথ্যটি সঠিক, কারণ এটি সরাসরি সিএসএস থেকে আসছে এবং জাভাস্ক্রিপ্টের মাধ্যমে সঠিক পর্দার প্রস্থ পাওয়া নিয়ে আমাদের কোনও ঝামেলা করতে হবে না।

— dschenk
সূত্র
আপনার ব্যবহার করার দরকার নেই querySelector()বা getPropertyValue()। আপনি খুব রেগেক্সে একক উদ্ধৃতি সন্ধান করতে পারেন (যেহেতু এটি ধারাবাহিক নয়)। এই: window.getComputedStyle(document.body, ':after').content.replace(/"|'/g, '')। এবং, এটি কিছুটা কম ব্যয়বহুল করার জন্য, আপনি এটি 100 ._debounce()মিলিয়ন ডলার অপেক্ষা করে আন্ডারস্কোর / লোড্যাশে মোড়ানো করতে পারেন । শেষ অবধি, <html> এ এন্ট্রিব যোগ করার ফলে সরঞ্জামের বাইরের কাঁচা পতাকা / ডেটার সন্ধানের ক্ষেত্রে টুলটিপ অক্ষম ক্লজগুলির মতো আউটপুট উপলব্ধ হয়। উদাহরণ: gist.github.com/dhaupin/f01cd87873092f4fe2fb8d802f9514b1
— ধৌপিন
2

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

উইন্ডো.উটারউইথ ব্রাউজার উইন্ডোর বাইরের প্রস্থ পায় gets এটি সাইডবার (যদি প্রসারিত হয়), উইন্ডো ক্রোম এবং উইন্ডোর আকার পরিবর্তনকারী সীমানা / হ্যান্ডলগুলি সহ পুরো ব্রাউজার উইন্ডোটির প্রস্থ উপস্থাপন করে।

জাভাস্ক্রিপ্টের অবস্থা এমন যে প্রত্যেকটি ব্রাউজারে প্রতিটি ব্রাউজারে আউটডউইথের নির্দিষ্ট অর্থের উপর নির্ভর করতে পারে না।

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

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

ইন সারসংক্ষেপ , যদি আপনি শুধুমাত্র ডেস্কটপে ব্রাউজার ও নতুন মোবাইল ব্রাউজারের জন্য উন্নয়নশীল হয়, outerWidth আপনি দিতে হবে আপনি যা খুঁজছেন তা করা হয়, সঙ্গে কিছু আদেশ সহকারে ।

— fzzylogic
সূত্র
1

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

     if (window.matchMedia('(max-width: 694px)').matches)
    {
        //do desired changes
    }

আরও তথ্যের জন্য মজিলা ডকুমেন্টেশন দেখুন ।

— user2128205
সূত্র
1

এটা চেষ্টা কর 

getData(){
    if(window.innerWidth <= 768) {
      alert('mobile view')
      return;
    }

   //else function will work

    let body= {
      "key" : 'keyValue'
    }
    this.dataService.getData(body).subscribe(
      (data: any) => {
        this.myData = data
      }
    )
}
— দিনেশ অধিকারী
সূত্র
0

ওয়ার্কআরউন্ড যা সর্বদা কাজ করে এবং সিএসএস মিডিয়া প্রশ্নের সাথে সিঙ্ক হয়।

শরীরে একটি ডিভ যুক্ত করুন

<body>
    ...
    <div class='check-media'></div>
    ...
</body>

শৈলী যুক্ত করুন এবং নির্দিষ্ট মিডিয়া ক্যোয়ারিতে প্রবেশ করে সেগুলি পরিবর্তন করুন

.check-media{
    display:none;
    width:0;
}
@media screen and (max-width: 768px) {
    .check-media{
         width:768px;
    }
    ...
}

তারপরে জেএস চেক স্টাইলে আপনি মিডিয়া ক্যোয়ারিতে প্রবেশ করে পরিবর্তন করছেন

if($('.check-media').width() == 768){
    console.log('You are in (max-width: 768px)');
}else{
    console.log('You are out of (max-width: 768px)');
}

সুতরাং সাধারণত আপনি নির্দিষ্ট মিডিয়া ক্যোয়ারিতে প্রবেশ করে যে কোনও স্টাইল পরিবর্তন করা হচ্ছে তা পরীক্ষা করতে পারেন।

— আর্সেন পাইসকিউলিয়ান
সূত্র
0

মডার্নিজ.আরএমকিউ ব্যবহার করা সর্বোত্তম ক্রস-ব্রাউজার সমাধান

লিঙ্ক: https://modernizr.com/docs/#mq

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

var query = Modernizr.mq('(min-width: 900px)');
if (query) {
   // the browser window is larger than 900px
}

দ্রষ্টব্য ব্রাউজার মিডিয়া ক্যোয়ারিকে সমর্থন করে না (যেমন পুরানো আইই) এমকিউ সবসময় মিথ্যা ফিরিয়ে দেবে।

— সানজিব দেবনাথ
সূত্র
0 
if(window.matchMedia('(max-width: 768px)').matches)
    {
        $(".article-item").text(function(i, text) {

            if (text.length >= 150) {
                text = text.substring(0, 250);
                var lastIndex = text.lastIndexOf(" ");     
                text = text.substring(0, lastIndex) + '...'; 
            }

            $(this).text(text);

        });

    }
— অ্যাডাম কলটন
সূত্র
0

আমি কি করবো ;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
...

এবং এরপরে যেকোন জায়গায় অ্যাডথ ভেরিয়েবল কল করুন।

স্ক্রোলবারের প্রস্থ গণনা করা হয়েছে তা নিশ্চিত করার জন্য আপনাকে নথির বডিটিতে getWidth () স্থাপন করতে হবে, অন্যথায় ব্রাউজারের স্ক্রোলবার প্রস্থটি getWidth () থেকে বিয়োগ করা হয়েছে।

— burkul
সূত্র
-1

রেজিকেশন (jQuery) এর উপর নির্ভর করে ব্লকটিতে স্লাইড স্লাইডার বাস্তবায়ন এবং বিভিন্ন সংখ্যক স্লাইড প্রদর্শন করুন

   if(window.matchMedia('(max-width: 768px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: true,
      });
    }

    if(window.matchMedia('(max-width: 1024px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4,
        dots: true,
      });
    }
— Vitalii
সূত্র
-2

এটা চেষ্টা কর 

if (document.documentElement.clientWidth < 767) {
   // scripts
}

আরও রেফারেন্সের জন্য এখানে ক্লিক করুন

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