css - ejemplos - @media(min-width
¿Cuál es la diferencia entre max-device-width y max-width para web móvil? (8)
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?
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.
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.
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).
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.
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.
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.
¿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 */
}
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.