Медіа-запити емуляції режиму пристрою Chrome не працюють


94

З якоїсь причини режим емуляції пристрою не читає мої медіа-запити. Він працює на інших сайтах, включаючи мої власні сайти, які я зробив із bootstrap, але не працює з медіа-запитами, які я використовую з нуля (натискання кнопки мультимедійних запитів робить цю кнопку синьою, але медіа-запити не відображаються). Тестовий файл нижче. Це помилка в Chrome чи щось потрібно змінити у своєму файлі?

<!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>

2
Сем Скотт: Відповідь @ BananaNeil є більш задовільною, ніж моя, якщо можете, позначте його як найкращу відповідь.
Екскаватор

Відповіді:


247

Я вирішив цю проблему, додавши мета-тег на свою сторінку:

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

ОНОВЛЕННЯ (грудень 2019 р.):

Схоже, вам також може знадобитися встановити початковий і мінімальний масштаб, наприклад:

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

7
це спрацювало і на мене. Будь-яка ідея, чому це вирішує проблему?
Річі Томас,

@BananaNeil: навіть мені цікаво знати, в чому причина цього рішення для роботи? якісь думки?
dreamweiver

2
Схоже, емулятор хрому завжди намагається відтворити та зменшити 946pxсторінку на будь-який розмір екрана, який він емулює. Ви можете переконатися, що це правда, перевіривши, що ширина вашого тегу тіла вашої проблемної сторінки завжди 946pxзнаходиться в емуляторі. Тег viewport повідомляє браузеру, як йому слід спробувати відтворити сторінку. width=device-widthдіє так, як ви очікували, при цьому width=100pxмасштабуючи все. Детальніше про це ви можете прочитати тут: w3schools.com/css/css_rwd_viewport.asp
BananaNeil

2
Він також може поводитися химерно, якщо ви перебільшили масштаб ... Ви отримуєте лише розміри, які ви можете ввести. На Mac, якщо ви виконуєте cmd shift -, врешті-решт список мобільних емуляторів знову з’являється з Galaxy S5, iPhone 6 тощо ...
JGFMK

1
Важко пам’ятати, що це не за замовчуванням;)
doublejosh

19

Прийнята відповідь не зробила цього для мене, мені довелося додати minimum-scale=1також.

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

1
ти маєш рацію, я не знав про цю додану властивість
minimum

6

Емуляція пристрою в Chrome все ще є WIP. Чесно кажучи, я думаю, що вони надто швидко підсунули це до Chrome. Спробуйте використати Canary (браузер chrome beta) для тестування емуляції, я переконався, що вона працює набагато краще, ніж у Chrome.


0

Працює для мене.

Просто розмістіть метатег області перегляду у верхній частині сторінки. Див. Приклад:

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

0

Включіть цей метатег у свій код:

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


0

Постійно мав ту саму проблему, поки не помітив, що якщо у мене є кілька варіантів реалізації одного і того ж набору правил, залежно від розміру екрана:

Вкажіть мінімальну та максимальну ширину для одного і того ж медіа-запиту, щоб його не перезаписав наступний:

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

}

Або встановіть принаймні одну точку зупинки для всіх:

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

}

}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.