Con una pantalla pequeña y un gran campo de visión, cómo simular una página web de 1920 de ancho en una computadora portátil
Como diseñadores de UI, estamos expuestos a una variedad de tamaños de pantalla al crear páginas web. Los más utilizados son 1920-1080, 1440-900, 1366-768, 1280-800, etc. el tamaño más grande entre las computadoras de los usuarios actuales es sin duda 1920 (la pantalla de 5K de Mac puede ignorarse y la base de usuarios es demasiado pequeña).
Surgen problemas: muchos diseñadores utilizan MacBooks Retina de 13 y 15 pulgadas. La resolución visual predeterminada (no la resolución física) es solo 1280-800 y algunas empresas no la proporcionan. Pantalla externa, ¿cómo usas tu computadora portátil para obtener una vista previa del efecto de la página web de 1920?
La función de simulación de dispositivo del navegador Chrome puede ayudarnos a simular cualquier tamaño de pantalla sólo con un portátil.
Cómo simular páginas web de gran tamaño y páginas web móviles en una computadora portátil
Comprende la función de emulación de dispositivo del navegador Chrome
1-Haz clic derecho en la página y seleccione Inspeccionar
2-Haga clic en el ícono del teléfono móvil en el lado izquierdo de la capa emergente debajo
3-Cuando encuentre que la página cambia y se acerca, haga clic el botón de cambio de dispositivo en la parte superior
4-Seleccione Editar....Abra la página de edición del dispositivo
En la página de edición, Chrome ha integrado muchos tamaños de dispositivos de uso común, incluidos tabletas, teléfonos móviles y ordenadores. Muchas veces podemos simular y obtener una vista previa del efecto de página del sitio web móvil en la computadora sin usar teléfonos móviles.
A continuación, agreguemos un tamaño de pantalla de 1920. Los pasos son los siguientes:
Para una fácil distinción, escriba 1920 directamente en el nombre del dispositivo. Si desea agregar 1280 más adelante, solo escribe 1280.
Lo que estamos agregando ahora es una página web, así que asegúrese de seleccionar Escritorio. Si está utilizando un teléfono móvil, seleccione Móvil. Chrome ya nos ha configurado varios tamaños de teléfonos móviles, por lo que no los agregaremos más.
Otra cosa a tener en cuenta es que la altura que escribí es 960, no 1080. ¿A qué se debe esto? Está relacionado con el rango de visualización real de la página web.
Tomando como ejemplo las computadoras con pantallas de 1920-1080, de hecho, la altura de visualización de la primera pantalla de una página web no es 1080, sino menos la altura de la barra de menú del sistema informático y las distintas columnas. de Chrome, que es aproximadamente 120,1080-120=960. Por lo tanto, la altura del tamaño de nuestra simulación también debe reducirse. Como se muestra a continuación:
Este valor puede ser diferente según el navegador. En PC, la barra de menú del sistema está en la parte inferior, por el mismo motivo.
Después de agregar el dispositivo 1920, puede seleccionar 1920 en el interruptor de dispositivo para simular.
Debido a la pequeña pantalla de la computadora, solo se puede mostrar con un zoom del 30%. Sin embargo, esta relación de zoom se puede ajustar.
Otra forma de escalar una página web es reducir directamente la proporción de la página web. El método específico es la tecla de acceso directo cmd++/-.
Sin embargo, si se reduce hasta cierto punto, la fuente de la página web ya no se reducirá y se destruirá todo el diseño del estilo. El efecto es muy malo y no se recomienda su uso. él.
Por lo tanto, no necesitamos solicitar una pantalla externa en el futuro. Aún podemos usar una computadora portátil para obtener una vista previa del efecto de pantalla grande. Espero que este artículo pueda mejorar la eficiencia del diseño de los diseñadores de UI. .
Para obtener más artículos sobre diseño de UI, siga UI Hacker
Cuenta pública de WeChat uihacker
Sitio web oficial de UI Hacker/
Foro de UI Hacker /