Maqueta de Iphone más grande que el teléfono real

La respuesta simple está en cómo genera su HTML o cómo publica en Axure Share. La clave está en la configuración del generador.

Si elige el menú Publicar > Más generadores y configuraciones... se le proporciona una lista de todos los generadores. Por defecto tienes cuatro opciones:

• HTML 1
• Documento de Word 1
• CSV Informe 1
• Imprimir 1

El HTML 1 es el que desea editar, hágalo haciendo doble clic en la entrada.

Esto le da el editor para el generador. La entrada Móvil/Dispositivo es donde puede especificar opciones que crean la etiqueta de ventana gráfica y los atributos para el encabezado de su HTML generado. Seleccione la entrada Móvil/Dispositivo .

La opción que necesita está deshabilitada de forma predeterminada, elija Incluir etiqueta de ventana gráfica .

Establezca el Ancho al tamaño del ancho de su maqueta. No tiene que usar el tamaño de píxel físico del dispositivo que está usando. Pero ayuda si la relación entre la altura y el ancho coincide con su dispositivo de destino (iOS o Android). Puedes usar el ancho o la altura, tiendo a usar el ancho, de esa manera no se ve tan mal en Android e iOS.

Asegúrese de borrar la escala inicial , seleccione evitar el desplazamiento vertical de la página y seleccione Ocultar navegación del navegador . El penúltimo evitará que los encabezados se desplacen fuera de la pantalla, pero significa que debe administrar el desplazamiento en su maqueta. El último es importante para que no vea los controles de navegación en el navegador cuando lo inicia desde la pantalla de inicio.

También puede configurar el icono de la pantalla de inicio. Esto es realmente bueno para iOS y Android. Cuando tenga su maqueta abierta, elija marcar/guardar en su pantalla de inicio. Cuando hagas esto, usará el ícono que incluyeste.

Vale la pena considerar la barra de estado de iOS . A veces lo escondo o lo configuro en negro translúcido.

Puedes probar las pantallas de inicio, pero nunca las hice funcionar.

Nota: no se pueden cargar imágenes por algún motivo, se editarán con capturas de pantalla más tarde

Por lo general, en una herramienta vectorial como Adobe XD, querrá diseñar en el tamaño de pantalla de "píxeles CSS", que en realidad es 375x667 en este caso. Un iPhone 6 en realidad tiene el doble de píxeles en cada dimensión, pero también son la mitad de pequeños, eso es lo que la gente quiere decir con "2x" DPI. Por lo general, es mejor diseñar en el tamaño 1x y dejar que la herramienta (como XD) amplíe la cantidad de píxeles automáticamente según sea necesario cuando exporte activos PNG.

Por lo general, eso le da una coincidencia bastante cercana al tamaño de los elementos que ve en su pantalla, y el tamaño que vería en su teléfono si lo sostiene junto a la pantalla. Sin embargo, no es una combinación perfecta, ya que el DPI de las diferentes pantallas de computadora varía un poco: muy pocas pantallas son una combinación perfecta, o un múltiplo perfecto, del DPI del iPhone.

Dos opciones para conseguir que las tallas coincidan mejor:

1. Acerque o aleje la vista de la herramienta de diseño hasta que tenga el mismo tamaño que su teléfono físico. Realmente no perderá fidelidad ya que todavía está diseñando con vectores.
2. Use la vista previa en el dispositivo para obtener una vista previa de su diseño directamente en un teléfono en tiempo real mientras trabaja. En Adobe XD, puede hacer esto fácilmente simplemente conectando su teléfono a la computadora con un cable USB.