Các truy vấn phương tiện mô phỏng chế độ thiết bị Chrome không hoạt động

Question 1

Vì một số lý do, chế độ giả lập thiết bị không đọc các truy vấn phương tiện của tôi. Nó hoạt động trên các trang web khác bao gồm các trang web của riêng tôi mà tôi đã tạo bằng bootstrap, nhưng nó không hoạt động trên các truy vấn phương tiện mà tôi đang sử dụng từ đầu (nhấp vào nút truy vấn phương tiện chuyển nút thành màu xanh lam nhưng không có truy vấn phương tiện nào được hiển thị). Tệp kiểm tra bên dưới. Đây có phải là lỗi trong Chrome hay có điều gì đó tôi cần thay đổi trong tệp của mình?

<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
    <title>MQ Example 1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: sans-serif; }
        h1 { color: red; } 
        h2 { color:blue; }
        p { color:green; }

        @media (max-width: 768px) and (min-width: 481px) {
            h1 { color: green; } 
            h2 { color:red; }
            p { color:blue; }
        }

        @media (max-width:479px), print { 
            h1,h2,p { color:black; }
        }

        @media print {
            body { font-family: serif; }
        }


    </style>
</head>
<body>
    <h1>I'm a first level heading</h1>
    <p>I'm a paragraph.</p>
    <h2>I'm a second level heading</h2>
    <p>I'm another paragraph.</p>
</body>
</html>

Question 2

Tôi đã khắc phục sự cố này bằng cách thêm thẻ meta vào trang của mình:

 <meta name="viewport" content="width=device-width">

CẬP NHẬT (tháng 12 năm 2019):

Có vẻ như bạn cũng có thể cần đặt tỷ lệ ban đầu và tỷ lệ tối thiểu, như sau:

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

Question 3

Câu trả lời được chấp nhận không phù hợp với tôi, tôi cũng phải thêm một câu trả lời minimum-scale=1.

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

Question 4

Mô phỏng thiết bị trong Chrome vẫn là một WIP. Thành thật mà nói, tôi nghĩ rằng họ đã đẩy nó lên Chrome quá sớm. Hãy thử sử dụng Canary (trình duyệt chrome beta) để kiểm tra mô phỏng, tôi thấy rằng nó hoạt động tốt hơn so với trình duyệt trong Chrome.

Question 5

Làm việc cho tôi.

Chỉ cần đặt một thẻ meta chế độ xem trong phần đầu của trang của bạn. Xem ví dụ:

 <head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

Question 6

Bao gồm thẻ meta này trong mã của bạn:

<head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

Mở rộng đoạn mã

Question 7

Vẫn gặp vấn đề tương tự cho đến khi tôi nhận thấy rằng nếu tôi có nhiều triển khai cho cùng một bộ quy tắc tùy thuộc vào kích thước màn hình:

Chỉ định cả chiều rộng tối thiểu và chiều rộng tối đa cho cùng một truy vấn phương tiện để truy vấn đó không bị ghi đè bởi truy vấn tiếp theo:

@media screen and (min-width:9px , max-width:9px) {

    css.selector { 

        style rules gets applied : in this range of screen sizes ;

    } 

}


css.selector{


    the other style get applied : starting from 10px ;

}

Hoặc đặt ít nhất một điểm ngắt cho tất cả:

@media screen and (min-width:9px) {

    some styles get applied : starting from this point ;

}

}

@media screen and (min-width:99px) {

    some styles gets applied : starting from this point ;

}

}