¿Cuál es la diferencia entre max-device-width y max-width para web móvil?


242

Necesito desarrollar algunas páginas html para teléfonos iphone / android, pero ¿cuál es la diferencia entre max-device-widthy max-width? Necesito usar diferentes CSS para diferentes tamaños de pantalla.

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

¿Cual es la diferencia?



1
He descubierto que max-device-widthfunciona incluso si la <meta name="viewport" ...>etiqueta no está incluida para dispositivos de pantalla pequeña y max-widthno funciona sin una metaetiqueta
Faizan Akram Dar

Respuestas:


252

max-width es el ancho del área de visualización de destino, por ejemplo, el navegador

max-device-width es el ancho del área de representación completa del dispositivo, es decir, la pantalla real del dispositivo

Lo mismo va para max-heighty max-device-heightnaturalmente.


15
Si desea ver el cambio al cambiar el tamaño de su navegador, use max-width para el desarrollo, aunque max-device-width es más preciso para la producción.
John Magnolia

31
@ JohnMagnolia ¿Qué te hace pensar que max-device-width es mejor para la producción? ¿El ancho máximo no garantizaría una mejor capacidad de respuesta, independientemente del dispositivo?
e_known

8
@eknown estoy de acuerdo. Los usuarios de todo el espectro de habilidades / conocimientos no siempre tienen la ventana del navegador de su escritorio maximizada (pero aún no he visto una tableta o teléfono que no tenga un navegador abierto maximizado; supongo que es posible en una aplicación híbrida, pero eso Es un caso diferente). El ancho máximo ciertamente sería más universal.
Jason

2
@eknown no estoy de acuerdo. Dependiendo de sus estilos, puede tener un aspecto muy diferente después de alcanzar ese punto de interrupción de medios y si está cargando hojas de estilo basadas en puntos de interrupción de medios, puede ser muy discordante que el sitio adopte un aspecto completamente diferente al cambiar el tamaño de la ventana del navegador.
TwinPrimesAreEz

2
Si tiene un diseño radicalmente diferente para dispositivos móviles, probablemente la razón fundamental sea porque no hay un cursor del mouse (necesitan botones más grandes y una sola columna para desplazarse). Una gran consulta de medios para usar en ese caso es la @media screen and (pointer: coarse) and (hover: none)que cambiará a la versión móvil independientemente de la cantidad de píxeles que los dispositivos móviles empaqueten en sus pantallas en el futuro.
EoghanM

81

max-widthse refiere al ancho de la ventana gráfica y se puede usar para orientar tamaños u orientaciones específicos junto con max-height. Usando múltiples max-width(o min-width) condiciones, puede cambiar el estilo de la página a medida que se cambia el tamaño del navegador o la orientación cambia en un dispositivo como un iPhone.

max-device-widthse refiere al tamaño de la vista del dispositivo, independientemente de la orientación, la escala actual o el cambio de tamaño. Esto no cambiará en un dispositivo, por lo que no se puede usar para cambiar hojas de estilo o directivas CSS a medida que se gira o cambia el tamaño de la pantalla.


11
Esta respuesta lo hizo "clic" para mí mejor que la respuesta aceptada. Suena como para la mayoría de las aplicaciones, max-widthy max-heightserán las que usará.
hotshot309

2
@JackieChiles hace un buen punto en otro hilo SO que uno debe considerar (con respecto a los estilos móviles que aparecen en dispositivos más grandes): stackoverflow.com/questions/8564752/…
hotshot309

55
Esta buena respuesta no está completa: la orientación intercambia el ancho y la altura del dispositivo en Android pero no en iOS: consulte quirksmode.org/blog/archives/2010/04/the_orientation.html .

16

¿Qué opinas sobre usar este estilo?

Para todos los puntos de interrupción que son principalmente para "dispositivo móvil" que uso min(max)-device-widthy para los puntos de interrupción que son principalmente para uso de "escritorio" min(max)-width.

Hay muchos "dispositivos móviles" que calculan mal el ancho.

Mire http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml :

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

No responde la pregunta y en realidad es una mala forma de trabajar en sus puntos de interrupción: tenga cuidado.
Cuarenta

8

max-device-width es el ancho de representación del dispositivo

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}

El ancho máximo es el ancho del área de visualización de destino, el tamaño actual del navegador.


2
@media all y (max-width: 400px) {} ¿Cuál es la diferencia?
virsir

5

la diferencia es que max-device-width es todo el ancho de la pantalla y max-width significa el espacio utilizado por el navegador para mostrar las páginas. Pero otra diferencia importante es el soporte de los navegadores Android, de hecho, si vas a usar max-device-width, esto solo funcionará en Opera, en cambio, estoy seguro de que max-width funcionará para cada tipo de navegador móvil ( Lo probé en Chrome, Firefox y Opera para Android).


5

max-width es el ancho del área de visualización de destino, por ejemplo, el navegador; max-device-width es el ancho del área de representación completa del dispositivo, es decir, la pantalla real del dispositivo.

• Si está utilizando el ancho máximo del dispositivo , cuando cambia el tamaño de la ventana del navegador en su escritorio, el estilo CSS no cambiará a una configuración de consulta de medios diferente;

• Si está utilizando el ancho máximo , cuando cambia el tamaño del navegador en su escritorio, el CSS cambiará a una configuración de consulta de medios diferente y es posible que se muestre con el estilo para móviles, como menús táctiles.


3

Si está creando una aplicación multiplataforma (por ejemplo, usando phonegap / cordova), entonces,

No use el ancho del dispositivo o la altura del dispositivo. En su lugar, use el ancho o la altura en las consultas de medios CSS porque el dispositivo Android dará problemas en el ancho o la altura del dispositivo. Para iOS funciona bien. Solo los dispositivos Android no son compatibles con el ancho del dispositivo / altura del dispositivo.


2

No use más el ancho / altura del dispositivo.

el ancho del dispositivo, la altura del dispositivo y la relación de aspecto del dispositivo están en desuso en el Nivel 4 de consultas de medios: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Solo use ancho / alto (sin mínimo / máximo) en combinación con orientación y resolución (mínimo / máximo) para apuntar a dispositivos específicos. En el móvil, el ancho / alto debe ser igual al ancho / alto del dispositivo.


Los elementos simples "device-xxx" están en desuso, los elementos "max-device-xxx" NO están en desuso.
Roger Krueger

1
@RogerKrueger ¿Estás seguro de eso? No veo nada que indique que las consultas de medios max-device-xxx no estén en desuso.
Jonny Cook
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.