¿Diferencia entre la ventana gráfica visual y la ventana gráfica de diseño?

¿Cuál es la diferencia entre la ventana gráfica visual y la ventana gráfica de diseño para un dispositivo móvil como iPhone / iPad?

He pasado por muchos recursos en línea, pero aún no estoy seguro al respecto.

La ventana gráfica visual es la parte de la página que se muestra actualmente en la pantalla.

La ventana gráfica de presentación puede ser considerablemente más ancha que la ventana gráfica visual, y contiene elementos que aparecen y no aparecen en la pantalla.

Imagine la ventana gráfica de presentación como una imagen grande que no cambia de tamaño o forma. Ahora imagina que tienes un marco más pequeño a través del cual miras la imagen grande. El marco pequeño está rodeado de material opaco que oscurece la vista de todo excepto una parte de la imagen grande. La parte de la imagen grande que puede ver a través del marco es la ventana gráfica visual. Puede alejarse de la imagen grande mientras sujeta su marco (alejar) para ver toda la imagen a la vez, o puede acercarse (acercar) para ver solo una parte. También puede cambiar la orientación del marco, pero el tamaño y la forma de la imagen grande (vista de diseño) nunca cambia.

Para un excelente tratamiento del problema, consulte: http://www.quirksmode.org/mobile/viewports2.html

Una muy buena explicación de los dos se encuentra aquí .

En resumen:

Visualizador visual

La ventana gráfica visual es la parte de la página que se muestra actualmente en la pantalla. El usuario puede desplazarse para cambiar la parte de la página que ve o hacer un zoom para cambiar el tamaño de la ventana gráfica.

Vista de diseño

Sin embargo, el diseño de CSS, especialmente los anchos percentuales, se calculan en relación con la ventana gráfica de presentación, que es considerablemente más amplia que la ventana gráfica visual.

Por lo tanto, el elemento toma el ancho de la ventana gráfica de diseño inicialmente, y su CSS se interpreta como si la pantalla fuera significativamente más ancha que la pantalla del teléfono. Esto asegura que el diseño de su sitio se comporte como lo hace en un navegador de escritorio.

¿Qué tan ancha es la ventana gráfica de diseño? Eso difiere por navegador. Safari iPhone usa 980px, Opera 850px, Android WebKit 800px e IE 974px.

En resumen, la ventana gráfica de presentación es generalmente el ancho de la ventana gráfica cuando la pantalla se amplía por completo.