css - ejemplos - @media(min-width

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

Question

Necesito desarrollar algunas páginas html para teléfonos iPhone / Android, pero ¿cuál es la diferencia entre max-device-width y 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?

Answer 1

No uses el ancho / alto del dispositivo nunca más.

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

Simplemente use el ancho / alto (sin mín. / Máx.) En combinación con la orientación y la resolución (mín. / Máx.) Para apuntar a dispositivos específicos. En el ancho / alto móvil debe ser el mismo que el ancho / alto del dispositivo.

Answer 2

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

No use ancho de dispositivo o altura de dispositivo. Más bien use el ancho o el alto en las consultas de medios CSS porque el dispositivo Android dará problemas en el ancho o en el alto del dispositivo. Para iOS funciona bien. Sólo los dispositivos Android no admiten dispositivo de ancho / dispositivo de altura.

Answer 3

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

Answer 4

max-device-width tendrá valores constantes (probablemente dos)

@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 significa el tamaño actual del navegador.

Answer 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 del dispositivo real

Lo mismo ocurre con max-height max-device-height y la max-height max-device-height forma natural.

Answer 6

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

max-device-width refiere al tamaño de la ventana gráfica 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 las hojas de estilo o las directivas CSS ya que la pantalla se gira o cambia de tamaño.

Answer 7

¿Qué piensas acerca de usar este estilo?

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

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

Mire en 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 */
}

Answer 8

ancho máximo 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 del dispositivo real.

• Si está utilizando el ancho máximo de 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 el estilo para móviles, como los menús táctiles.