Metaetiquetas de metadatos frente a consultas de medios?

Question

Me gustaría saber, para optimizar su sitio web para tabletas, computadoras de escritorio y smarthpones, qué es lo mejor para usar: las consultas de medios o las metaetiquetas de Viewport? ver código:

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

vs

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

Answer 1

Yo diría que cada situación es diferente ... y no es una situación cualquiera. la metaetiqueta de la ventana gráfica que tiene arriba lo haría para que el sitio web mantenga la proporción de 1 a 1, que en muchos casos es buena. sin embargo, también se establece un "no" escalable por el usuario, lo que significa que el usuario no podrá acercarse, etc. a veces la forma en que los ipads y otros dispositivos cambian su sitio es lo mejor ... (depende)

el mejor método que he encontrado es el uso de preguntas de los medios y para elegir uno de los 2 dirrections:

1. inicio de la pequeña y construir
2. inicio de grandes y construir hacia abajo

estirar la ventana del navegador más y más grande (o más y más pequeño) y luego cuando t El sitio web se pone feo, (justo antes) ese es tu próximo punto de quiebre ... haz la consulta de medios allí ... y repite. no preste atención a todos los tamaños de dispositivo --- de esta manera sabrá que no importa qué nuevos dispositivos salgan --- lo ha diseñado para verse bien en todos los tamaños posibles. (cuando está por debajo de 320/me gusta simplemente hacer que el sitio se convierta en una tarjeta de visita /// mejor tener información legible para ninguno de los teléfonos inteligentes ...)

luego de todo esto ... probar en dispositivos y prueba diferentes metaetiquetas de ventanas.

hay muchos buenos artículos al respecto ... use palabras clave como diseño responsivo o diseño web adaptable o "RWD". y buena suerte !!!

Answer 2

Ambos son necesarios.

Las consultas de medios se utilizan para tener diferentes CSS para diferentes dispositivos, como la condición if para diferentes dispositivos.

Viewport metaetiqueta es establecer que el dispositivo tome el ancho de acuerdo con esta etiqueta. Es como un reinicio para dispositivos si su dispositivo no utilizado ajustará el diseño de acuerdo con su configuración predeterminada.

Answer 3

Depende de lo que quiera lograr.

Si desea diseñar solo para la resolución de escritorio y tener el navegador móvil "alejarse" y asumir una resolución similar a la del escritorio, puede usar solo las metaetiquetas de las ventanas, estableciendo el ancho en un valor fijo.

Si desea un diseño verdaderamente receptivo, debe establecer las metaetiquetas de la ventana gráfica en el ancho del dispositivo y usar consultas de medios para planificar el diseño para diferentes resoluciones como lo ha mostrado en su código.