Pregunta sobre el puerto de vista

Question

He pasado por una gran cantidad de recursos en línea para la ventana gráfica (en apple.com, quirksmode.org), pero todavía estoy confundido un poco ....

Decir que tengo una página que tiene un ancho de 400 px ... Ahora quiero optimizar lo mismo para la visualización de iPad ...

Si configuro la metaventaja como ancho de dispositivo (lo que creo que significa 768px para iPad en cualquier orientación);

1. ¿Eso significaría que mi tamaño de fuente aumentaría a 768px? O
2. Mi página se reduciría como si tuviera un ancho de 768 px y no 400px?

No tengo muy claro cuál es el efecto si utilizamos la ventana gráfica para diferentes escenarios?

¿Hay algún efecto negativo de la utilización de la ventana gráfica en cualquier página (si la página ancho < o> el ancho establecido ventana)

Podría alguien por favor me ayude en una manera fácil de entender ..

Gracias .

Answer 1

lo recomiendo la lectura de este artículo: http://www.quirksmode.org/mobile/viewports2.html Se puede responder a algunas o todas de su pregunta sobre la ventana gráfica. Ciertamente me ayudó.

La clave está en entender la diferencia entre la ventana gráfica visual (el ancho del píxel del navegador) y la ventana gráfica del diseño (el ancho que su CSS quiere representar en píxeles). Claramente, en la mayoría de los casos, la ventana gráfica de presentación será mucho más grande que la ventana gráfica visual.

E.g. su sitio web puede tener 950 px de ancho pero la ventana visual del navegador solo puede tener 320 px. Por lo general, los navegadores móviles se acercan para ver toda la página, pero ¿quién diablos puede leer eso?

Por lo tanto, establecer <meta name="viewport" content="width=320" ... > en su marcado establece que la ventana de presentación sea 320px, ¡lo mismo que la ventana gráfica visual!

Answer 2

Según tengo entendido (estoy un poco confundido con todas las consultas de medios y usando la ventana gráfica juntas), si haces la ventana gráfica 480px y el iPad es más grande, se verá como en tu escritorio computadora. Ignorará esto porque no es tan pequeño de una ventana gráfica para el ipad.

A menos que haga un archivo específico solo para iPad llamado (ipad.css) y agregue una consulta de medios separada para dispositivos entre este y ese ancho. p.ej.

<link type="text/css" rel="stylesheet" 
media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" 
href="ipad.css" /> 

o el uso de medios consulta

@media screen and (orientation:portrait) {} 
@media screen and (orientation:landscape) {} 

También puede restablecer CSS para dispositivos que por lo que sabe para cambiar el tamaño de letra, clases de identificadores de nuevo a la forma en que deben ser para dispositivos móviles.

Espero que ayude.

Aquí están algunos recursos que he estado jugando con:

• How to use CSS3 Orientation Media Queries
• Target iPhone and iPad with CSS3 Media Queries

Answer 3

Ok, para eliminar la confusión en la consulta de medios, debe conocer el concepto de utilizar la consulta de medios.

@media (min-width: 768px) and (max-width: 980px) { /*css here*/} 

comprueba el puerto de visualización del navegador e impone el código CSS interno al navegador. establecerá diferentes CSS en diferentes consultas de medios en el rango de puertos de visualización. el código estará en el archivo css como:

@media (min-width: 320px) and (max-width: 480px) { /*css here*/} 
    @media (min-width: 481px) and (max-width: 768px) { /*css here*/} 
    @media (min-width: 769px) and (max-width: 980px) { /*css here*/} 
    @media (min-width: 981px) and (max-width: 1024px) { /*css here*/} 
    @media (min-width: 1025px) and (max-width: 1240px) { /*css here*/} 

También hay otra manera. añadiendo diferentes archivos CSS basado en consulta de medios de la siguiente manera:

<link type="text/css" rel="stylesheet" media="(min-width: 320px) and (max-width: 480px)" href="ipad.css" /> 
    ... 
    ... 

Así, de acuerdo con estos consulta se puede establecer estilo diferente para la misma salida. Ahora bien, si desea imponer un tamaño de puerto de vista diferente que no está realmente en el navegador, entonces debe establecer la metaetiqueta.

<meta name="viewport" content="width=320, ... "> 

Significa, el navegador establece su puerto de vista y escalará hacia abajo o ampliar según sea necesario de acuerdo con el tamaño real del puerto vista del navegador. Y funciona solo en "Opera Mobile 11" en adelante. Por lo tanto, si el puerto de visualización de su navegador es 360 y el meta establecido en 320, se ampliará o ampliará por un factor de 1.125.