Consultas de mídia de emulação do modo de dispositivo Chrome não funcionam

94

Por algum motivo, o modo de emulação de dispositivo não está lendo minhas consultas de mídia. Funciona em outros sites, incluindo meus próprios sites que fiz com bootstrap, mas não está funcionando em consultas de mídia que estou usando do zero (clicar no botão de consultas de mídia torna o botão azul, mas nenhuma consulta de mídia é exibida). Arquivo de teste abaixo. Isso é um bug no Chrome ou há algo que preciso alterar em meu arquivo?

<!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
fonte
2
Sam Scott: a resposta da @BananaNeil é mais satisfatória do que a minha, se você puder, marque a dele como a melhor resposta.
Digger

Respostas:

250

Resolvi esse problema adicionando uma metatag à minha página:

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

ATUALIZAÇÃO (dezembro de 2019):

Parece que você também precisa definir a escala inicial e a escala mínima, assim:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
BananaNeil
fonte
7
isso funcionou para mim também. Alguma ideia de por que isso resolve o problema?
Richie Thomas de
@BananaNeil: até eu estou curioso para saber qual a razão por trás dessa solução funcionar? Alguma ideia ?
dreamweiver
2
Parece que o emulador de cromo sempre tenta renderizar e reduzir uma 946pxpágina em qualquer tamanho de tela que está emulando. Você pode ver que isso é verdade, verificando se a largura da tag do corpo da sua página problemática está sempre 946pxno emulador. A tag viewport informa ao navegador como ele deve tentar renderizar a página. width=device-widthage da maneira que você esperaria, enquanto width=100pxamplia tudo. Você pode ler mais sobre isso aqui: w3schools.com/css/css_rwd_viewport.asp
BananaNeil
2
Ele também pode se comportar estranhamente se você tiver aumentado o zoom ... Você só obtém dimensões que pode inserir. Em um Mac, se você fizer o cmd shift -, eventualmente a lista de emuladores móveis aparecerá novamente com o Galaxy S5, iPhone 6 etc. nele ...
JGFMK
1
É difícil lembrar que este não é o padrão;)
doublejosh
19

A resposta aceita não funcionou para mim, eu tive que adicionar um minimum-scale=1também.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
Sanjsanj
fonte
1
você está certo, eu não estava ciente dessa propriedade adicionada escala
mínima
6

A emulação de dispositivo no Chrome ainda é um WIP. Para ser honesto, acho que empurraram para o Chrome um pouco cedo. Tente usar Canary (o navegador Chrome beta) para testar a emulação, acho que está funcionando muito melhor do que o Chrome.

Escavador
fonte
0

Funciona para mim.

Basta colocar uma meta tag da janela de visualização na seção head da sua página. Consultar exemplo:

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

Inclua esta metatag em seu código: 

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

Williamvivas
fonte
0

Continuei tendo o mesmo problema até perceber que se eu tiver mais de uma implementação para o mesmo conjunto de regras dependendo do tamanho da tela:

Especifique a largura mínima e máxima para a mesma consulta de mídia para que ela não seja substituída pela subsequente:

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

}

Ou defina pelo menos um ponto de interrupção para todos:

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