$ (window). thong () không giống như truy vấn phương tiện

186

Tôi đang sử dụng Twitter Bootstrap trong một dự án. Cũng như các kiểu bootstrap mặc định, tôi cũng đã thêm một số kiểu của riêng mình

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

Tôi cũng đang sử dụng jQuery để thay đổi thứ tự của các thành phần nhất định trên trang khi chiều rộng của khung nhìn nhỏ hơn 767px. 

$(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"));
    }
}

Vấn đề tôi gặp phải là chiều rộng được tính theo $(window).width()và chiều rộng được tính bằng CSS dường như không giống nhau. Khi $(window).width()trả về 767, css tính toán cho nó chiều rộng khung nhìn là 751 nên dường như có sự khác biệt 16px.

Có ai biết điều gì gây ra điều này và làm thế nào tôi có thể giải quyết vấn đề? Mọi người đã gợi ý rằng chiều rộng của thanh cuộn không được xem xét và sử dụng $(window).innerWidth() < 751là cách để đi. Tuy nhiên, lý tưởng nhất là tôi muốn tìm một giải pháp tính toán độ rộng của thanh cuộn và phù hợp với truy vấn phương tiện của tôi (ví dụ: cả hai điều kiện đang kiểm tra so với giá trị 767). Bởi vì chắc chắn không phải tất cả các trình duyệt sẽ có chiều rộng thanh cuộn là 16px?

jquery  css  twitter-bootstrap  media-queries 
— Gia súc
nguồn
1
Hãy thử một cái gì đó nếu ($ ('html'). Width () <= 767) {// Làm gì đó}
— Vaibs_Cool
@Vaibs_Cool Cảm ơn bạn đã gợi ý nhưng tôi vẫn nhận được kết quả tương tự
— súc
— Ignitor
Trả lời tôi ở đây [nhập mô tả liên kết tại đây] [1] [1]: stackoverflow.com/questions/11309859/ Lời
— Rantiev
"Document.documentEuity.clientWidth" (thay vì "$ (window). Thong ()") hoạt động như thế nào bạn muốn nó hoạt động? Chỉnh sửa: Lỗi của tôi, chỉ cần thấy câu trả lời của Vaibs_Cool.
— joshhunt

Câu trả lời:

292

Nếu bạn không phải hỗ trợ IE9, bạn chỉ có thể sử dụng window.matchMedia()( tài liệu MDN ).

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

window.matchMedia hoàn toàn phù hợp với các truy vấn phương tiện CSS và hỗ trợ trình duyệt khá tốt: http://caniuse.com/#feat=matchmedia

CẬP NHẬT:

Nếu bạn phải hỗ trợ nhiều trình duyệt hơn, bạn có thể sử dụng phương pháp mq của Modernizr , nó hỗ trợ tất cả các trình duyệt hiểu các truy vấn phương tiện trong CSS.

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}
— ausi
nguồn
8
Nếu bạn có thể đủ khả năng sử dụng thư viện Modernizr, đây là câu trả lời tốt nhất hiện có.
— richsinn
1
Giải pháp này tốt hơn: stackoverflow.com/a/19292035/1136132 (mã thứ 2). Chỉ có JS.
— joseantgv
@joseantgv Giải pháp của tôi cũng chỉ dành cho js. Bạn có thể giải thích tại sao giải pháp bạn liên kết đến là tốt hơn?
— ausi
2
@edwardm Modernizr.mqchỉ trả về giá trị boolean, vì vậy bạn phải tự gọi nó trong onresizetrình xử lý sự kiện.
— ausi
2
@Bernig window.matchMedialà cách khuyến khích, bởi vì nó không gây ra một quy trình ngược , tùy thuộc vào mức độ thường xuyên bạn gọi hàm này có thể gây ra vấn đề hiệu suất. Nếu bạn không muốn sử dụng Modernizr trực tiếp, bạn có thể sao chép mã nguồn từ src / mq.js và src / chíchEuityWithStyles.js .
— ausi
175

Kiểm tra quy tắc CSS mà truy vấn phương tiện thay đổi. Điều này được đảm bảo để luôn luôn làm việc.

http://www.fourfront.us/blog/jquery-window- thong-and-media-query

HTML:

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

Javascript:

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

CSS:

#mobile-indicator {
    display: none;
}

@media (max-width: 767px) {
    #mobile-indicator {
        display: block;
    }
}
— Nate
nguồn
9
Đó là một giải pháp tao nhã hơn các bản hack JS được đề cập trong các câu trả lời khác.
— René Roth
3
+1 này chỉ là thông minh. Tôi thích làm thế nào nếu bạn muốn thay đổi điểm dừng, tất cả những gì bạn phải làm là thay đổi css chứ không phải javascript.
— JoeMoe1984
Giải pháp này hoạt động tốt và tôi thấy nó thanh lịch hơn so với hack javascript được đề xuất trong câu trả lời được bình chọn nhiều nhất.
— Andrés Meza-Escallón
2
Nếu bạn sử dụng bootstrap bạn có thể làm điều đó mà không cần css như<div id="xs-indicator" class="xs-visible">
— Camo
33

Nó có thể là do scrollbar, sử dụng innerWidththay vì widththích

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"));
}

Ngoài ra, bạn có thể nhận được viewportnhư

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

Mã nguồn trên

— Rohan Kumar
nguồn
Cảm ơn. Điều này sẽ hoạt động nhưng dù sao tôi cũng có thể sử dụng jquery để bao gồm chiều rộng của thanh cuộn. Tôi chỉ nghĩ rằng chiều rộng của thanh cuộn có thể thay đổi trên các trình duyệt khác nhau?
— súc
1
Có sử dụng innerWidth()hoặc bạn có thể sử dụng nó như $('body').innerWidth();Xem stackoverflow.com/questions/8339377/ trên
— Rohan Kumar
3
Ý bạn là window.innerWidth, không phải trên đối tượng jQuery $ (window), $ (window). Thong () trả về nó không chính xác
— EJanuszewski
1
window.innerWidthkhông phù hợp với truy vấn phương tiện CSS trong Safari 8 nếu thanh cuộn được bật trong tùy chọn hệ thống OSX.
— ausi
10

vâng, đó là do thanh cuộn. Nguồn câu trả lời đúng: nhập mô tả liên kết tại đây

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' ] };
}
— Rantiev
nguồn
4

Có lẽ cách tốt hơn là không phạm vi chiều rộng của tài liệu mà là một số thay đổi được thực hiện bởi truy vấn css @media. Với phương thức này, bạn có thể chắc chắn rằng hàm JQuery và thay đổi css xảy ra cùng một lúc.

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");
    ...
});
— ngữ pháp
nguồn
3

Tôi đã phải đối mặt với cùng một vấn đề gần đây - cũng với Bootstrap 3.

Cả $. Thong () hay $ .innerWidth () đều không phù hợp với bạn.

Giải pháp tốt nhất tôi nghĩ ra - và được thiết kế riêng cho BS3 -
là kiểm tra độ rộng của một .containerphần tử.

Như bạn có thể biết làm thế nào các .containeryếu tố hoạt động,
đó là phần tử duy nhất sẽ cung cấp cho bạn chiều rộng hiện tại được đặt theo quy tắc BS css.

Vì vậy, nó đi một cái gì đó như

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");
— người dùng 3041539
nguồn
3

Đây là một phương pháp thay thế cho các phương pháp được đề cập trước đó dựa vào việc thay đổi một cái gì đó thông qua CSS và đọc nó qua Javascript. Phương pháp này không cần window.matchMediahoặc Modernizr. Nó cũng không cần thêm yếu tố HTML. Nó hoạt động bằng cách sử dụng phần tử giả HTML để 'lưu trữ' thông tin điểm dừng:

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";
  }
}

Tôi đã sử dụng bodylàm ví dụ, bạn có thể sử dụng bất kỳ yếu tố HTML nào cho việc này. Bạn có thể thêm bất kỳ chuỗi hoặc số nào bạn muốn vào contentphần tử giả. Không phải là "di động", v.v.

Bây giờ chúng ta có thể đọc thông tin này từ Javascript theo cách sau:

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

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

Bằng cách này, chúng tôi luôn chắc chắn rằng thông tin điểm dừng là chính xác, vì nó đến trực tiếp từ CSS và chúng tôi không phải gặp rắc rối với việc có chiều rộng màn hình phù hợp thông qua Javascript.

— dschenk
nguồn
Bạn không cần phải sử dụng querySelector()hoặc getPropertyValue(). Bạn cũng có thể tìm một trích dẫn trong regex (vì nó không nhất quán). Điều này : window.getComputedStyle(document.body, ':after').content.replace(/"|'/g, ''). Và, để làm cho nó rẻ hơn một chút, bạn có thể gói nó trong dấu gạch dưới / lodash ._debounce()với ~ 100ms chờ đợi. Cuối cùng, việc thêm các attribs vào <html> làm cho đầu ra có sẵn cho những thứ khác như tooltip vô hiệu hóa các mệnh đề tìm kiếm các cờ / dữ liệu thô bên ngoài các vars. Ví dụ: gist.github.com/dhaupin/f01cd87873092f4fe2fb8d802f9514b1
— dhaupin
2

Javascript cung cấp nhiều hơn một phương thức để kiểm tra độ rộng của khung nhìn. Như bạn đã nhận thấy, InternalWidth không bao gồm chiều rộng thanh công cụ và độ rộng thanh công cụ sẽ khác nhau giữa các hệ thống. Ngoài ra còn có tùy chọn outsWidth , sẽ bao gồm chiều rộng thanh công cụ. Các API Mozilla Javascript trạng thái:

Window.outerWidth có chiều rộng bên ngoài cửa sổ trình duyệt. Nó đại diện cho chiều rộng của toàn bộ cửa sổ trình duyệt bao gồm thanh bên (nếu được mở rộng), viền cửa sổ và viền / thay đổi kích thước cửa sổ.

Trạng thái của javascript là như vậy mà người ta không thể dựa vào một ý nghĩa cụ thể cho outsWidth trong mọi trình duyệt trên mọi nền tảng.

outerWidthđược cũng không được hỗ trợ trên cũ trình duyệt di động , mặc dù nó được sự ủng hộ trên các trình duyệt máy tính để bàn lớn và hầu hết các trình duyệt điện thoại thông minh mới hơn.

Như ausi đã chỉ ra, matchMediasẽ là một lựa chọn tuyệt vời vì CSS được tiêu chuẩn hóa tốt hơn (matchMedia sử dụng JS để đọc các giá trị khung nhìn được phát hiện bởi CSS). Nhưng ngay cả với các tiêu chuẩn được chấp nhận, các trình duyệt bị trì hoãn vẫn tồn tại mà bỏ qua chúng (IE <10 trong trường hợp này, điều này làm cho matchMedia không hữu dụng ít nhất cho đến khi XP chết).

Trong bản tóm tắt , nếu bạn chỉ phát triển cho các trình duyệt máy tính để bàn và các trình duyệt di động mới hơn, outerWidth nên cung cấp cho bạn những gì bạn đang tìm kiếm, với một số hãy cẩn thận .

— mờ
nguồn
1

Đây là một mẹo ít liên quan để đối phó với các truy vấn phương tiện truyền thông. Hỗ trợ trình duyệt chéo là một chút hạn chế vì nó không hỗ trợ IE di động.

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

Xem tài liệu Mozilla để biết thêm chi tiết.

— người dùng2128205
nguồn
1

thử cái này 

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
      }
    )
}
— TIẾNG VIỆT
nguồn
0

Giải pháp luôn hoạt động và được đồng bộ hóa với các truy vấn phương tiện CSS.

Thêm một div cho cơ thể

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

Thêm kiểu và thay đổi chúng bằng cách nhập vào truy vấn phương tiện cụ thể

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

Sau đó, trong kiểu kiểm tra JS mà bạn đang thay đổi bằng cách nhập vào truy vấn phương tiện

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

Vì vậy, nhìn chung bạn có thể kiểm tra bất kỳ kiểu nào đang được thay đổi bằng cách nhập vào truy vấn phương tiện cụ thể.

— Asen Pyuskyulyan
nguồn
0

Giải pháp đa trình duyệt tốt nhất là sử dụng Modernizr.mq

liên kết: https://modernizr.com/docs/#mq

Modernizr.mq cho phép bạn kiểm tra theo chương trình nếu trạng thái cửa sổ trình duyệt hiện tại phù hợp với truy vấn phương tiện.

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

Lưu ý Trình duyệt không hỗ trợ truy vấn phương tiện (ví dụ IE cũ) mq sẽ luôn trả về false.

— Sanjib Debnath
nguồn
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);

        });

    }
— Adam Colton
nguồn
0

Những gì tôi làm ;

<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>
...

và gọi biến aWidth ở bất cứ đâu sau đó.

Bạn cần đặt getWidth () lên trong thân tài liệu của mình để đảm bảo rằng chiều rộng của thanh cuộn được tính, chiều rộng thanh cuộn khác của trình duyệt được trừ từ getWidth ().

— burkul
nguồn
-1

Thanh trượt trơn trượt và hiển thị số lượng slide khác nhau trong khối tùy thuộc vào độ phân giải (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
nguồn
-2

Thử cái này 

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

Để tham khảo thêm bấm vào đây

— Vaibs_Cool
nguồn
Cảm ơn, điều này vẫn có kết quả tương tự mặc dù
— súc
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.