Lấy chiều rộng thiết bị trong javascript

Có cách nào để lấy chiều rộng thiết bị của người dùng, trái ngược với chiều rộng khung nhìn, sử dụng javascript không?

Các truy vấn phương tiện CSS cung cấp điều này, như tôi có thể nói

@media screen and (max-width:640px) {
    /* ... */
}

và

@media screen and (max-device-width:960px) {
    /* ... */
}

Điều này rất hữu ích nếu tôi đang nhắm mục tiêu điện thoại thông minh theo hướng ngang. Ví dụ: trên iOS, khai báo về max-width:640pxsẽ nhắm mục tiêu cả chế độ ngang và dọc, ngay cả trên iPhone 4. Theo như tôi có thể nói thì đây không phải là trường hợp của Android, vì vậy, sử dụng chiều rộng thiết bị trong trường hợp này nhắm mục tiêu thành công cả hai hướng, mà không nhắm mục tiêu thiết bị máy tính để bàn.

Tuy nhiên , nếu tôi đang gọi một liên kết javascript dựa trên chiều rộng thiết bị, thì dường như tôi bị giới hạn trong việc kiểm tra chiều rộng khung nhìn, có nghĩa là một thử nghiệm bổ sung như trong phần sau,

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

Điều này có vẻ không thanh lịch đối với tôi, với gợi ý rằng chiều rộng thiết bị có sẵn cho css.

Bạn có thể lấy chiều rộng màn hình thiết bị thông qua thuộc tính screen.width.
Đôi khi cũng hữu ích khi sử dụng window.innerWidth (thường không được tìm thấy trên thiết bị di động) thay vì chiều rộng màn hình khi xử lý các trình duyệt trên máy tính để bàn trong đó kích thước cửa sổ thường nhỏ hơn kích thước màn hình thiết bị.

Thông thường, khi xử lý thiết bị di động VÀ trình duyệt trên máy tính để bàn, tôi sử dụng những điều sau:

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

Một vấn đề với câu trả lời hữu ích của Bryan Rieger là trên các màn hình có mật độ cao, thiết bị Apple báo cáo độ rộng màn hình bằng điểm ảnh, trong khi thiết bị Android báo cáo bằng pixel vật lý. (Xem http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html .) Tôi khuyên bạn nên sử dụng if (window.matchMedia('(max-device-width: 960px)').matches) {}trên các trình duyệt hỗ trợ matchMedia.

Tôi vừa mới có ý tưởng này, vì vậy có thể nó thiển cận, nhưng nó có vẻ hoạt động tốt và có thể là nhất quán giữa CSS và JS của bạn.

Trong CSS, bạn đặt giá trị chiều rộng tối đa cho html dựa trên giá trị màn hình @media:

@media screen and (max-width: 480px) and (orientation: portrait){

    html { 
        max-width: 480px;
    }

    ... more styles for max-width 480px screens go here

}

Sau đó, bằng cách sử dụng JS (có thể thông qua một khuôn khổ như JQuery), bạn sẽ chỉ kiểm tra giá trị chiều rộng tối đa của thẻ html:

maxwidth = $('html').css('max-width');

Bây giờ bạn có thể sử dụng giá trị này để thực hiện các thay đổi có điều kiện:

If (maxwidth == '480px') { do something }

Nếu việc đặt giá trị chiều rộng tối đa trên thẻ html có vẻ đáng sợ, thì có thể bạn có thể đặt một thẻ khác, một thẻ chỉ được sử dụng cho mục đích này. Đối với mục đích của tôi, thẻ html hoạt động tốt và không ảnh hưởng đến đánh dấu của tôi.

Hữu ích nếu bạn đang sử dụng Sass, v.v .: Để trả về một giá trị trừu tượng hơn, chẳng hạn như tên điểm ngắt, thay vì giá trị px, bạn có thể làm như sau:

1. Tạo một phần tử sẽ lưu tên điểm ngắt, ví dụ: <div id="breakpoint-indicator" />
2. Sử dụng truy vấn phương tiện css thay đổi thuộc tính nội dung cho phần tử này, ví dụ: "lớn" hoặc "di động", v.v. (cùng một cách tiếp cận truy vấn phương tiện cơ bản như trên, nhưng đặt thuộc tính css 'content' thay vì 'max-width').
3. Nhận giá trị thuộc tính nội dung css bằng cách sử dụng js hoặc jquery (ví dụ: jquery $('#breakpoint-indicator').css('content');), trả về "lớn" hoặc "di động", v.v. tùy thuộc vào thuộc tính nội dung được đặt thành gì bởi truy vấn phương tiện.
4. Hành động trên giá trị hiện tại.

Bây giờ bạn có thể thao tác với các tên điểm ngắt giống như khi làm trong sass, ví dụ: sass:, @include respond-to(xs)và js if ($breakpoint = "xs) {}.

Điều tôi đặc biệt thích về điều này là tôi có thể xác định tất cả các tên điểm ngắt của mình bằng css và ở một nơi (có thể là một tài liệu scss biến) và js của tôi có thể hoạt động trên chúng một cách độc lập.

var width = Math.max(window.screen.width, window.innerWidth);

Điều này sẽ xử lý hầu hết các tình huống.

Bạn nên sử dụng

document.documentElement.clientWidth

Nó được coi là khả năng tương thích trên nhiều trình duyệt và là phương thức giống như jQuery (window) .width (); sử dụng.

Để biết thông tin chi tiết, hãy xem tại: https://ryanve.com/lab/dimensions/

Tôi nghĩ rằng sử dụng window.devicePixelRatiolà thanh lịch hơn window.matchMediagiải pháp:

if (window.innerWidth*window.devicePixelRatio <= 960 
    && window.innerHeight*window.devicePixelRatio <= 640) { 
    ... 
}

kiểm tra nó

const mq = window.matchMedia( "(min-width: 500px)" );

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

bạn có thể dễ dàng sử dụng

document.documentElement.clientWidth

Điện thoại Lumia cung cấp độ rộng màn hình sai (ít nhất là trên trình giả lập). Vì vậy, có thể Math.min(window.innerWidth || Infinity, screen.width)sẽ hoạt động trên tất cả các thiết bị?

Hoặc điều gì đó điên rồ hơn:

for (var i = 100; !window.matchMedia('(max-device-width: ' + i + 'px)').matches; i++) {}
var deviceWidth = i;

Ya mybe u có thể sử dụng document.documentElement.clientWidth để lấy chiều rộng thiết bị của máy khách và tiếp tục theo dõi chiều rộng thiết bị bằng cách đặt trên setInterval

giống như

setInterval(function(){
        width = document.documentElement.clientWidth;
        console.log(width);
    }, 1000);

Cũng giống như FYI, có một thư viện được gọi là điểm ngắt phát hiện chiều rộng tối đa như được đặt trong CSS và cho phép bạn sử dụng nó trong điều kiện JS if-else bằng cách sử dụng các dấu <=, <,>,> = và ==. Tôi thấy nó khá hữu ích. Kích thước tải trọng dưới 3 KB.