Viewport Resizer: Bookmarklet extremadamente flexible que le permite probar diferentes resoluciones fácilmente

Las tareas de un diseñador web están lejos de ser más fáciles. Más y más resoluciones diferentes llegan al mercado y deben abordarse en diseños profesionales. La antigua distinción bastante simple entre un sitio para dispositivos móviles y otro para usuarios de escritorio ya no es suficiente. Con el éxito de los teléfonos inteligentes de los tamaños más diferentes, el problema crece cada hora. Por supuesto disponemos de media queries para abordar correctamente las diferentes resoluciones. Y aunque funcionan en la mayoría de los casos, aún debe probarlos correctamente.

Redimensionar ventana gráfica

Viewport Resizer como un marcador

la aplicación web Redimensionar ventana gráfica es uno de los pequeños ayudantes inventados para facilitar la vida de un diseñador. Simplemente arrastre la pequeña herramienta a su barra de marcadores y la tendrá al alcance de su mano a partir de ese momento. El bookmarklet viene en dos configuraciones predeterminadas, que puede modificar y ampliar con bastante facilidad. El primer estándar trae numerosas resoluciones para smartphones, tablets, monitores y varios dispositivos Apple. La segunda configuración predeterminada ofrece soporte solo para resoluciones de iOS.

Las dos barras estándar de Viewport Resizer

Una vez incrustado en la barra de marcadores, Viewport Resizer espera su misión. Si desea probar un sitio web, llame a su URL, espere hasta que esté completamente cargado y luego haga clic en el marcador. Aparece una pequeña barra de herramientas en la parte superior de la página, que muestra las resoluciones o dispositivos disponibles. Haga clic en uno de ellos, la ventana del navegador cambia de tamaño en consecuencia. De esta manera, puede probar rápidamente los diferentes puntos de ruptura y su funcionamiento previsto. Si está desarrollando para resoluciones especiales, puede personalizar fácilmente los valores detrás de los íconos en la barra de herramientas.

La barra de herramientas se puede personalizar individualmente

Si las dos configuraciones estándar no cubren sus necesidades individuales, siempre puede crear más con los dispositivos y las resoluciones que defina. Además de mostrar resoluciones genéricas, Viewport Resizer también viene con una pequeña cantidad de dispositivos predefinidos. Encontrarás HTC, Nokia, Sony Ericsson, Motorola y más. Si incluso estas posibilidades no le convienen, inicie el editor de texto incorporado y alimente Viewport Resizer con valores a su gusto. Tú defines resoluciones, las nombras e incluso pones iconos a las elecciones. De esa manera, crea su propia barra de herramientas que se puede usar como su propio bookmarklet, al igual que las barras predeterminadas.

Selección de dispositivos y editor de resultados

Compatibilidad y limitaciones del navegador

Redimensionar ventana gráfica funciona en todos los navegadores modernos con la excepción de, adivina, Internet Explorer. Condición previa importante: el sitio web que se probará debe permitir que se presente dentro de los marcos. Si usa framebreakers, primero tendrá que desactivarlos. Viewport Resizer es fácilmente la herramienta más flexible de su naturaleza que jamás haya tenido. Puedo recomendarlo…

(dpe)