Làm cách nào để phát hiện hướng thiết bị bằng truy vấn phương tiện CSS?

Trong JavaScript, chế độ định hướng có thể được phát hiện bằng cách sử dụng:

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

Tuy nhiên, có cách nào để phát hiện hướng chỉ sử dụng CSS không?

Ví dụ. cái gì đó như:

@media only screen and (width > height) { ... }

CSS để phát hiện hướng màn hình:

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }

Định nghĩa CSS của truy vấn phương tiện là tại http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

nhưng có vẻ như bạn phải thử nghiệm

Tôi nghĩ rằng chúng ta cần phải viết truy vấn phương tiện truyền thông cụ thể hơn. Hãy chắc chắn rằng nếu bạn viết một truy vấn phương tiện thì nó sẽ không ảnh hưởng đến chế độ xem khác (Mob, Tab, Bàn) nếu không nó có thể gây rắc rối. Tôi muốn đề nghị viết một truy vấn phương tiện cơ bản cho thiết bị tương ứng bao gồm cả chế độ xem và một truy vấn phương tiện định hướng mà bạn có thể mã cụ thể hơn về chế độ xem định hướng để thực hành tốt. chúng ta không cần phải viết cả hai truy vấn định hướng phương tiện cùng một lúc. Bạn có thể tham khảo ví dụ của tôi dưới đây. Tôi xin lỗi nếu viết tiếng Anh của tôi không tốt lắm. Ví dụ:

Dành cho thiết bị di động

@media screen and (max-width:767px) {

..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.

}


@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {


..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

Dành cho máy tính bảng

@media screen and (max-width:1024px){
..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){

..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

Máy tính để bàn

làm theo yêu cầu thiết kế của bạn được hưởng ... (:

Cảm ơn

Tôi sẽ đi cho tỷ lệ khung hình, nó cung cấp nhiều khả năng hơn.

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
    ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}

Cả hai, định hướng và tỷ lệ khung hình đều phụ thuộc vào kích thước thực tế của khung nhìn và không liên quan gì đến chính hướng thiết bị.

Đọc thêm: https://dev.to/ananyaneogi/usiously-css-media-query-features-o7f

Trong Javascript, tốt hơn là sử dụng screen.widthvà screen.height. Hai giá trị này có sẵn trong tất cả các trình duyệt hiện đại. Chúng cung cấp kích thước thật của màn hình, ngay cả khi trình duyệt đã được thu nhỏ lại khi ứng dụng kích hoạt. window.innerWidththay đổi khi trình duyệt được thu nhỏ lại, điều này không thể xảy ra trên thiết bị di động nhưng có thể xảy ra trên PC và máy tính xách tay.

Các giá trị screen.widthvà screen.heightthay đổi khi thiết bị di động lật giữa chế độ dọc và ngang, do đó có thể xác định chế độ bằng cách so sánh các giá trị. Nếu screen.widthlớn hơn 1280px bạn đang xử lý với PC hoặc máy tính xách tay.

Bạn có thể xây dựng một trình lắng nghe sự kiện trong Javascript để phát hiện khi hai giá trị được lật. Các giá trị độ rộng màn hình dọc để tập trung vào là 320px (chủ yếu là iPhone), 360px (hầu hết các điện thoại khác), 768px (máy tính bảng nhỏ) và 800px (máy tính bảng thông thường).