Mất kết nối truy vấn phương tiện sau khi chuyển đổi dọc theo chiều dọc

Question

Tôi thực sự không biết phải làm gì với điều này, tôi có một máy tính bảng Galaxy Tab 2, 7 inch và sử dụng chrome làm trình duyệt (v26.0.1410.58) trong Android 4.1.1. Tôi đang tải ứng dụng web ở chế độ dọc và truy vấn phương tiện phù hợp, tôi chuyển sang chế độ ngang và mọi thứ đều hoạt động tốt, nhưng khi tôi chuyển về chế độ dọc, trình duyệt không áp dụng bất kỳ phong cách ở tất cả, và gỡ lỗi các ứng dụng với usb máy tính bảng kết nối với máy tính, tôi có thể thấy chrome đã không tìm thấy một trận đấu với bất kỳ truy vấn phương tiện truyền thông nữa.

Các truy vấn phương tiện truyền thông tôi đang áp dụng là:

(device-width: 600px) và (max-thiết bị-height: 1024px) và (max-width: 600px) và (min -device-height: 976px) và (định hướng: chân dung)

Nếu tôi kiểm tra chiều rộng và chiều cao của thiết bị trong các trình duyệt sau và trước khi điều này xảy ra, họ không thay đổi chút nào cả.

Một số dữ liệu có thể hữu ích:

screen.width: 600

screen.height: 976

$ (window) .width(): 600

Nó chỉ xảy ra trong thiết bị này và tôi cần hỗ trợ ứng dụng trong tab này.

Answer 1

Tôi không có thiết bị để kiểm tra, nhưng tôi thường gắn với các truy vấn phương tiện đơn giản hơn.

Có lẽ chỉ thử chiều rộng tối đa thay vì chiều rộng của thiết bị. Tôi thấy rằng làm điều này kết hợp với bố cục dựa trên phần trăm có nghĩa là tôi không cụ thể với thiết bị với bố cục của tôi.

@media (max-width: 600px) {...}

Answer 2

truy vấn định hướng phương tiện truyền thông là một nỗi đau thực sự để hỗ trợ ... Tôi sẽ tư vấn để tránh xa chúng. Tôi có một bộ truy vấn phương tiện thực sự tốt mà tôi sử dụng. Tôi chỉ đảo ngược các truy vấn phương tiện của Zurb's Foundation. Xem dưới đây ...

// Small screens 
@media only screen { } 
/* Define mobile styles */ 

@media only screen and (max-width: 40em) { } 
/* max-width 640px, mobile-only styles, use when QAing mobile issues */ 

// Medium screens 
@media only screen and (min-width: 40.063em) { } 
/* min-width 641px, medium screens */ 

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } 
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ 

// Large screens 
@media only screen and (min-width: 64.063em) { } 
/* min-width 1025px, large screens */ 

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } 
/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ 

// XLarge screens 
@media only screen and (min-width: 90.063em) { } 
/* min-width 1441px, xlarge screens */ 

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } 
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ 

// XXLarge screens 
@media only screen and (min-width: 120.063em) { } 
/* min-width 1921px, xxlarge screens */ 

Answer 3

Bạn nên cố gắng

@media only screen and (max-device-width: 600px) { /* STYLES GO HERE */} 
/* styles apply only in portrait mode */ 

@media only screen and (min-device-width: 601px) { /* STYLES GO HERE */} 
/* styles apply only in landscape mode */ 

Nếu bạn cần một phong cách chỉ làm việc trong giữa phạm vi của điện thoại ... Obs: viết các bit định hướng chỉ nếu bạn muốn các kiểu áp dụng cho một trong hai.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */} 

Thả các giá trị khác bạn đã khai báo, tạo xung đột do chiều cao.