css - san - ios icon size

Mi iPhone piensa que tiene 980px de ancho

Question

Estoy tratando de crear un conjunto de tres consultas de medios muy simples para manejar un rango de tamaños de pantalla. Esto es lo que se me ocurrió, después de un montón de headcatching:

@media all and (min-width: 0px) and (max-width: 480px) { styles here }
@media all and (min-width: 481px) and (max-width: 1023px) { styles here }
@media all and (min-width: 1024px) { styles here } 

Esto funciona como esperaba en los navegadores, pero cuando lo apunto con mi iPhone, insiste en mostrar los archivos para el tamaño medio. Jugando con los números, encontré que solo con un ancho máximo de 980px el iPhone responde a los estilos dentro de esa consulta .

Tenga en cuenta que utilicé "todas" en estas consultas para descartar cualquier cosa que tenga que ver con codificar o no "dispositivo de mano" o "pantalla, dispositivo de mano", etc. Intentar simplificar para ayudarme a entender el problema.

Pensé que podría haber tenido algo que ver con el contenido de la página que estaba desarrollando, así que creé una página de prueba sin contenido para tratar de precisar el problema. Está en:

http://rgdaniel.com/test-mediaquery.php

Si miro esa página con mis navegadores de escritorio, se comporta como se espera cuando redimensiono la ventana cada vez más grande. Pero el iPhone reporta mi mensaje de "resolución media" en cualquier ancho máximo especificado bajo 980px. Cualquier ayuda apreciada, gracias de antemano.

Answer 1

Cuando utilice media queries , debe agregar esto a su etiqueta de head .

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

Esto permite que el sitio web detecte que se está utilizando en un dispositivo.

También puedes hacer esto,

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

Esta parte, user-scalable=0; impide al usuario hacer zoom con sus dedos y es útil si tiene position: fixed elementos position: fixed .