Truyền tải truy vấn phương tiện ở độ rộng sai

Question

Tôi đang tạo trang đáp ứng và truy vấn phương tiện đang kích hoạt ở kích thước chiều rộng sai. Tôi đang sử dụng Chrome.

@media screen and (max-width: 1200px) { 
.logo-pic { 
    display: none; 
} 
} 

Ví dụ: quy tắc này hoạt động chỉ cháy ở kích thước sai. Quy tắc này kích hoạt ở 1320px và không phải 1200px. Tôi có thẻ meta cho html tại chỗ. Dường như nó đang kích hoạt truy vấn phương tiện truyền thông 100 hoặc hơn pixel so với chuẩn mực.

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Tôi đã kiểm tra trang web đáp ứng trước đó mà tôi đã thực hiện và các điểm ngắt đó được kích hoạt chính xác. Tôi đã thử nghiệm trình duyệt trên các trang web khác nhau và các truy vấn phương tiện cũng tốt.

Tôi đã tìm thấy một câu hỏi tương tự trên tràn ngăn xếp nhưng nó không được trả lời.

Media Queries breakpoint at wrong value

Bạn không chắc chắn vấn đề là gì?

Answer 1

Lý do phổ biến xảy ra là nếu bạn đã phóng to cửa sổ trình duyệt thành kích thước khác 100%. Trong trình duyệt của bạn, chọn trình đơn thả xuống 'Xem' và đảm bảo rằng nó được đặt thành 100%. Nếu bạn phóng to hoặc thu nhỏ, nó sẽ kích hoạt truy vấn phương tiện không phù hợp.

Và đừng lo lắng về việc cảm thấy xấu hổ. Nó có thể đã xảy ra, hoặc sẽ xảy ra với tất cả mọi người .. nhưng chỉ một lần.

---

Để tránh vấn đề này tất cả cùng nhau, bạn nên xem xét việc xác định các truy vấn phương tiện truyền thông của bạn sử dụng một đơn vị tương đối (em hoặc rem hơn px).

---

Bạn cũng có thể thực thi đặt mức thu phóng của trình duyệt thành 100% khi tải trang bằng javascript.

document.body.style.webkitTransform = 'scale(1)'; 
document.body.style.msTransform = 'scale(100)'; 
document.body.style.transform = 'scale(1)'; 
document.body.style.zoom = screen.logicalXDPI/screen.deviceXDPI; 

Answer 2

Bạn có thể thực hiện console.log ($ (cửa sổ) .width()); Kiểm tra giao diện điều khiển của bạn xem chiều rộng là gì trong khi thay đổi kích thước và khi truy vấn phương tiện áp dụng các thay đổi ....

Answer 3

Bạn có iframe (hoặc modals hoặc cửa sổ nhỏ hơn) tải cùng một trang tính CSS với truy vấn phương tiện của mình không? Nếu đó là trường hợp, đó là một vấn đề bộ nhớ cache, và bạn cần phải liên kết các tập tin CSS với một param câm như:

<link href="myCss.css?iframe=1" /> 

Để tải các tập tin css như một file mới thay vì lấy phiên bản cache .. Tôi hy vọng tôi rõ ràng :)

Answer 4

Chỉ cần thêm một đoạn ngắn để ngăn người khác tìm kiếm thêm ngay cả khi câu trả lời được đưa ra ở đây.

Thu phóng của tôi đã được đặt thành 100% và vẫn còn sự cố ở đó. Nếu bạn trải nghiệm như vậy, câu trả lời rất đơn giản: đặt thu phóng của bạn thành 90% và quay lại 100%, và sau đó là các điểm ngắt trên chiều rộng bạn muốn 'm.