CSS truy vấn phương tiện truyền thông và JavaScript chiều rộng cửa sổ không khớp nhau

Question

Đối với một mẫu đáp ứng, tôi có một truy vấn phương tiện truyền thông trong CSS của tôi:

@media screen and (max-width: 960px) { 
body{ 
/* something */ 
background:red; 
} 
} 

Và, tôi đã thực hiện một chức năng jQuery đã đổi kích thước để đăng nhập width:

$(window).resize(function() { 
console.log($(window).width()); 
console.log($(document).width()); /* same result */ 
/* something for my js navigation */ 
} 

và có một sự khác biệt với phát hiện CSS và kết quả JS, tôi có meta này:

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/> 

tôi cho rằng đó là do sự sc thanh cuộn (15 px). Làm thế nào tôi có thể làm điều này tốt hơn?

Answer 1

Bạn chính xác về thanh cuộn, đó là vì CSS đang sử dụng chiều rộng thiết bị, nhưng JS đang sử dụng chiều rộng tài liệu.

Những gì bạn cần làm là đo chiều rộng khung nhìn trong mã JS thay vì sử dụng chức năng chiều rộng của jQuery.

Mã này là từ http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

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

Answer 2

Kinh nghiệm của tôi là chiều rộng phương tiện truyền thông truy vấn theo dõi document.body.clientWidth. Do thanh cuộn dọc đến và đi, việc kiểm tra chiều rộng tài liệu, cửa sổ hoặc chế độ xem() có thể làm cho Javascript của tôi chạy muộn - sau khi thay đổi quy tắc truy vấn phương tiện, tùy thuộc vào chiều cao của cửa sổ.

Kiểm tra tài liệu.body.clientWidth cho phép mã tập lệnh của tôi thực thi nhất quán tại cùng một thời điểm quy tắc truy vấn phương tiện có hiệu lực.

@media (min-width: 873px) {
        // một số quy tắc
}
...

if (document.body.clientWidth> = 873) {
        // một số mã
}

Mã Andy Langton đưa tôi vào điều này - cảm ơn!

Answer 3

tôi thấy đoạn mã sau vào http://www.w3schools.com/js/js_window.asp:

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 

Thực tế nó làm việc theo cách tương tự như các câu trả lời trong câu trả lời @ Michael Bird, nhưng nó dễ dàng hơn để đọc.

Chỉnh sửa: Tôi đang tìm một phương pháp để cung cấp chính xác cùng chiều rộng như được sử dụng cho truy vấn phương tiện css. Nhưng đề xuất không hoạt động hoàn hảo trên Safari với thanh cuộn, xin lỗi. Tôi đã kết thúc bằng cách sử dụng modernizr.js trong một chức năng trung tâm và trong phần còn lại của mã tôi chỉ cần kiểm tra xem loại màn hình là di động, máy tính bảng hay máy tính để bàn.Như tôi đã không quan tâm đến chiều rộng, điều này hoạt động tốt đối với tôi:

getDisplayType = function() { 
    if (Modernizr.mq('(min-width: 768px)')){ 
    return 'desktop'; 
    } 
    else if (Modernizr.mq('(min-width: 480px)')){ 
    return 'tablet' 
    } 
    return 'mobile'; 
}; 

Answer 4

Hi tôi sử dụng thủ thuật này ít để có được JS và CSS làm việc cùng nhau một cách dễ dàng trên các trang đáp ứng:

thử nghiệm khả năng hiển thị của một phần tử được hiển thị hay không trên điều kiện kích thước CSS @media. Sử dụng CSS bootstrap i kiểm tra tầm nhìn của một nguyên tố lớp ẩn-xs

var msg = "a message for U"; 
 

 
/* At window load check initial size */ 
 
if ($('#test-xsmall').is(':hidden') ) { 
 
    /* This is a CSS Xsmall situation ! */ 
 
    msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! "; 
 
    $('.redthing-on-xsmall').addClass('redthing').html(msg); 
 

 
} else { 
 
    /* > 768px according to CSS */ 
 
    msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! "; 
 
    $('.redthing-on-xsmall').removeClass('redthing').html(msg); 
 
} 
 

 

 
/* And again when window resize */ 
 

 
$(window).on('resize', function() { 
 
    if ($('#test-xsmall').is(':hidden')) { 
 
    msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! "; 
 
    $('.redthing-on-xsmall').addClass('redthing').html(msg); 
 
    } else { 
 
    msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! "; 
 
    $('.redthing-on-xsmall').removeClass('redthing').html(msg); 
 
    } 
 
});

@media (min-width: 768px) { 
 
    .hidden-xs { 
 
    display: block !important; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .hidden-xs { 
 
    display: none !important; 
 
    } 
 
} 
 
.redthing-on-xsmall { 
 
    /* need a scrollbar to show window width diff between JS and css */ 
 
    min-height: 1500px; 
 
} 
 
.redthing { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- the CSS managed Element that is tested by JS --> 
 
<!-- class hidden-xs hides on xsmall screens (bootstrap) --> 
 

 
<span id="test-xsmall" class="hidden-xs">THIS ELEMENT IS MANAGED BY CSS HIDDEN on @media lower than 767px</span> 
 

 

 
<!-- the responsive element managed by Jquery --> 
 
<div class="redthing-on-xsmall">THIS ELEMENT IS MANAGED BY JQUERY RED on @media max width 767px </div>

Answer 5

Cách giải quyết mà luôn luôn làm việc và được đồng bộ hóa với các truy vấn phương tiện CSS.

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

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

Thêm phong cách 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 JS kiểm tra phong cách mà bạn đang thay đổi bằng cách nhập vào truy vấn phương tiện truyền thông

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, thông thường 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 thông số truy vấn phương tiện ific.

Answer 6

window.innerWidth là thứ bạn cần.

if (window.innerWidth < 768) làm việc cho 768 điểm break trong CSS

Answer 7

Css phương tiện truyền thông truy vấn bằng window.innerWidth. Css Media Queries cũng tính toán thanh cuộn.