jQuery cửa sổ rộng không bằng cửa sổ CSS của chiều rộng

Question

Tôi đang sử dụng hai miếng sau của CSS và mã JS:

@media (max-width: 720px) { 
    // a code to make arrows in a carousel disappear 
} 

if(jQuery(window).width() <= 720){ 
    // a code to make arrows in the carousel stop working 
} 

Vấn đề với họ là thực thi sau vào chính xác width = 738px và không 720px . Tôi nghi ngờ rằng điều này là do thanh cuộn dọc của trình duyệt có chiều rộng bằng 18px trong Chrome.

Có cách nào để thống nhất điều này không? Tôi muốn những hành động này xảy ra cùng một lúc trong tất cả các trình duyệt bất kể chiều rộng của thanh cuộn.

thử nghiệm (khi trình duyệt là @ 720px và CSS đã thực hiện):

jQuery(document).innerWidth() = 703 
jQuery(window).innerWidth() = 703 
jQuery(document).width() = 703 
jQuery(window).width() = 703 
jQuery('body').width() = 703 
jQuery('html').width() = 703 

Answer 1

tôi phải giải quyết cùng một vấn đề trong một thời gian trước đây, và cho đến nay giải pháp chính xác nhất tôi thấy là sử dụng phương tiện truyền thông q ueries để vượt qua kích thước cửa sổ thực tế để Javascript. Bạn cần phải làm theo các bước sau:

• Thêm một yếu tố ẩn vào trang của bạn,
• Sử dụng truy vấn phương tiện để thay đổi max-width tài sản của yếu tố đó,
• đọc lại max-width tài sản của yếu tố đó thông qua Javascript.

Ví dụ, thêm các yếu tố sau đây vào trang của bạn:

<div id="currentMedia"></div> 

Sau đó viết các quy tắc CSS sau:

#currentMedia { 
    display: none; 
} 

@media (max-width: 720px) { 
    /* Make arrows in the carousel disappear... */ 

    #currentMedia { 
     max-width: 720px; 
    } 
} 

Sau đó, từ phía Javascript, bạn có thể viết:

if (parseInt(jQuery("#currentMedia").css("max-width"), 10) <= 720) { 
    // Make arrows in the carousel stop working... 
} 

Và nó sẽ chính xác bất kể cuộn kích thước thanh, vì giá trị đến từ cùng một truy vấn phương tiện kích hoạt sự biến mất của băng chuyền.

Tôi đã thử nghiệm giải pháp này trên tất cả các trình duyệt chính gần đây và cung cấp kết quả chính xác.

Answer 2

Bạn sẽ tìm thấy bản tóm tắt lớn về những gì thuộc tính được hỗ trợ trên các trình duyệt on this page on quirksmode.org. Đặt cược tốt nhất của bạn có lẽ là lấy một phần tử trong trang (sử dụng document.body nơi được hỗ trợ, hoặc document.getElementById hoặc bất kỳ thứ gì), đi bộ chuỗi offsetParent của nó để tìm phần tử trên cùng, sau đó kiểm tra clientWidth và clientHeight của phần tử đó.

innerWidth tài liệu

innerWidth() nói phương pháp này là không áp dụng đối với window và document đối tượng; cho các, sử dụng .width()

thử

How can I get the browser's scrollbar sizes?

Từ Alexandre Gomes Blog

function getScrollBarWidth() { 
    var inner = document.createElement('p'); 
    inner.style.width = "100%"; 
    inner.style.height = "200px"; 

    var outer = document.createElement('div'); 
    outer.style.position = "absolute"; 
    outer.style.top = "0px"; 
    outer.style.left = "0px"; 
    outer.style.visibility = "hidden"; 
    outer.style.width = "200px"; 
    outer.style.height = "150px"; 
    outer.style.overflow = "hidden"; 
    outer.appendChild (inner); 

    document.body.appendChild (outer); 
    var w1 = inner.offsetWidth; 
    outer.style.overflow = 'scroll'; 
    var w2 = inner.offsetWidth; 
    if (w1 == w2) w2 = outer.clientWidth; 

    document.body.removeChild (outer); 

    return (w1 - w2); 
}; 

trong mã của bạn

if(jQuery(window).width()-getScrollBarWidth(); <= 720){ 
    // a code to make arrows in the carousel stop working 
} 

Answer 3

Nếu bạn đang sử dụng Bootstrap> 3 thì tôi sẽ gợi ý cho bạn điều gì đó.

Tàu khởi động với .container lớp trong Css và được xác định trước. Và thay đổi của nó với các truy vấn @media.So mẫu mã làm việc của tôi cho điều này là dưới đây.

function detectWidth(){ 
    var width = $('.container').eq(0).outerWidth() ; 
    console.log(width); 
    if(width<750){ 
    // do something for XS element 
    }else if(width>=750 && width<970){ 
    // do something for SM element 
    }else if(width>=970 && width<1170){ 
     // do something for MD element 
    }else{ 
    // do something for LG element 
    } 

}

Answer 4

Tôi nhận ra đây là một chủ đề cũ, nhưng tôi nghĩ nó vẫn có thể được hưởng lợi từ câu trả lời này.

var width = window.outerWidth; 

Điều này sẽ cung cấp cho bạn chiều rộng của cửa sổ bao gồm thanh cuộn, đó là những truy vấn phương tiện mà tôi sử dụng.

Answer 5

Một cắn chủ đề lỗi thời, nhưng tôi đã tìm thấy giải pháp này

function getWidth(){ 
    return ((window.innerWidth > 0) ? window.innerWidth : screen.width); 
}