Kueri Media Emulasi Mode Perangkat Chrome Tidak Berfungsi

94

Untuk beberapa alasan mode emulasi perangkat tidak membaca kueri media saya. Ini berfungsi di situs lain termasuk situs saya sendiri yang saya buat dengan bootstrap, tetapi tidak berfungsi pada kueri media yang saya gunakan dari awal (mengklik tombol kueri media akan mengubah tombol menjadi biru tetapi tidak ada kueri media yang ditampilkan). Uji file di bawah. Apakah ini bug di Chrome atau ada sesuatu yang perlu saya ubah di file saya?

<!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>
css google-chrome media-queries developer-tools Sam Scott
sumber
2
Sam Scott: Jawaban @ BananaNeil lebih memuaskan daripada jawaban saya, jika Anda bisa, tandai sebagai jawaban terbaik.
Digger

Jawaban:

247

Saya memperbaiki masalah ini dengan menambahkan tag meta ke halaman saya:

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

UPDATE (Desember 2019):

Sepertinya Anda juga perlu menyetel skala awal dan skala minimum, seperti ini:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
BananaNeil
sumber
7
ini juga berhasil untuk saya. Tahu mengapa ini menyelesaikan masalah?
Richie Thomas
@BananaNeil: bahkan saya penasaran ingin tahu apa alasan di balik solusi ini berhasil? ada pemikiran?
dreamweiver
2
Sepertinya emulator chrome selalu mencoba merender dan memperkecil 946pxhalaman menjadi layar berukuran berapa pun yang ditiru. Anda dapat melihat ini benar dengan memeriksa bahwa lebar tag body halaman Anda yang bermasalah selalu ada 946pxdi emulator. Tag viewport memberi tahu browser cara mencoba merender halaman. width=device-widthbertindak seperti yang Anda harapkan, sambil meningkatkan width=100pxskala. Anda dapat membaca lebih lanjut tentang ini di sini: w3schools.com/css/css_rwd_viewport.asp
BananaNeil
2
Itu juga dapat berperilaku unik jika Anda memperbesar ... Anda hanya mendapatkan dimensi yang dapat Anda masuki. Di Mac, Jika Anda melakukan pergeseran cmd -, akhirnya daftar emulator seluler muncul lagi dengan Galaxy S5, iPhone 6 dll di dalamnya ...
JGFMK
1
Sulit untuk mengingat ini bukan default;)
doublejosh
19

Jawaban yang diterima tidak berhasil untuk saya, saya harus menambahkan minimum-scale=1juga.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
sanjsanj
sumber
1
Anda benar Saya tidak tahu ini ditambahkan propertyminimum-scale = 1 .. thx
adnan tariq
6

Emulasi perangkat di Chrome masih WIP. Sejujurnya, saya pikir mereka mendorongnya ke Chrome terlalu cepat. Coba gunakan Canary (browser chrome beta) untuk menguji emulasi, saya menemukan bahwa ini bekerja jauh lebih baik daripada yang ada di Chrome.

Penggali
sumber
0

Bekerja untuk saya.

Letakkan saja tag meta viewport di bagian kepala halaman Anda. Lihat contoh:

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

Sertakan tag meta ini dalam kode Anda: 

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

williamvivas.dll
sumber
0

Terus mengalami masalah yang sama sampai saya perhatikan bahwa jika saya memiliki lebih dari satu implementasi untuk sekumpulan aturan yang sama tergantung pada ukuran layar:

Tentukan lebar minimum dan maksimum untuk kueri media yang sama agar tidak ditimpa oleh yang berikutnya:

@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 ;

}

Atau setel setidaknya satu breakpoint ke semua:

@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 ;

}

}
mostafa
sumber