Modo de escritorio de Safari en iPhone Duo: problemas de diseño y soluciones

iPhone Duo Safari Problems: Small Outer Screen, Wrong Website Layout

0 comentario

Respuesta rápida

Los problemas de Safari en el iPhone Duo pueden deberse al espacio disponible en cada pantalla y a la forma en que un sitio web elige su diseño.

La pantalla exterior compacta deja menos espacio para el contenido una vez que las barras de herramientas, los banners y el teclado son visibles.

Abrir el Duo da a un sitio web más espacio, pero su diseño determina si ese espacio resulta útil.

Vale la pena probar Solicitar sitio web para escritorio cuando la versión móvil oculta algo que necesitas; también puede hacer que los controles sean demasiado pequeños.

Compara los dos modos en la pantalla que estás usando antes de cambiar otros ajustes.

Por qué Safari puede parecer estrecho en la pantalla exterior

La mirada de ZEERA del 22 de octubre sobre la optimización de aplicaciones para iPhone Duo planteó un punto más amplio: el software tiene que hacer más que llenar la pantalla. Safari añade otra capa a ese problema porque tanto el navegador como cada sitio web de terceros dan forma a la experiencia.

En la pantalla exterior, la altura utilizable importa tanto como el ancho. El encabezado de un sitio web, el banner de cookies y la barra inferior fija pueden dejar visible solo una franja corta del artículo. Al abrir el teclado para buscar o rellenar un formulario, ese espacio se reduce aún más. Es poco probable que el modo escritorio ayude cuando el problema inmediato es que hay demasiado poco espacio para leer y escribir.

Por qué el sitio web puede verse mal después de abrir Duo

Una página web tiene varias formas de decidir qué mostrar. Estos mecanismos explican los posibles desajustes de diseño; la causa exacta depende del sitio web afectado.

El diseño responde a un umbral de ancho

Un sitio web adaptable puede cambiar entre una sola columna y una disposición más amplia en anchos específicos del navegador. Una pantalla física grande no garantiza que la página supere el umbral elegido por el sitio web. Incluso cuando lo hace, el diseño más amplio podría añadir una barra lateral en lugar de ampliar el artículo.

El sitio ofrece una experiencia móvil independiente

Algunos sitios web utilizan la identificación del navegador para seleccionar el contenido o las funciones. Si esa selección te mantiene en una versión móvil limitada, el espacio de pantalla adicional por sí solo puede no revelar un panel de navegación o una herramienta de edición ausente. La guía para desarrolladores de Apple recomienda detectar las funciones disponibles en lugar de depender de la identidad del navegador.

Un componente no se ajusta al nuevo espacio

Una tabla, un visor incrustado o un menú de ancho fijo pueden comportarse de manera diferente al resto de la página. Si el problema aparece solo después de plegar o girar, comparar esa página con una carga nueva en la posición final puede ayudar a identificar un problema relacionado con la transición. Esa es una pista de diagnóstico útil, no una prueba de un error específico de Safari.

La guía de WebKit sobre cambios de tamaño del navegador enfatiza los diseños adaptables y las consultas de medios o contenedores. Aplicado a Duo, la lección práctica es que un sitio web debe funcionar en todo el espacio disponible, en lugar de asumir que cada iPhone es un rectángulo alto.

Cómo probar el modo de escritorio de Safari en iPhone Duo

Abre el sitio web afectado en Safari.
Toca el botón Menú de la página junto al campo de dirección/búsqueda.
Elige Solicitar sitio web de escritorio, si está disponible. Usa Menú de personalización para comprobar las acciones disponibles si es necesario.
Compara la función que necesitas, el tamaño del texto y los controles táctiles antes de mantener esa vista.

Apple documenta el comando en su guía de ajustes de Safari. Trátalo como una solicitud de una presentación diferente del sitio web. No puede añadir un diseño o una función que el sitio no proporcione.

Pruébalo para un control de escritorio ausente. Un panel de control de cuenta o un servicio de documentos puede ofrecer más opciones en su presentación de escritorio. Reconsidéralo para la lectura normal en la pantalla exterior. Más columnas, enlaces más pequeños y menús más densos pueden dificultar esa tarea. Una página con aspecto de escritorio aún puede ser incómoda de manejar con los dedos.

Qué probar cuando el diseño siga siendo incómodo

1. Comprueba el zoom de la página antes de juzgar el tamaño del texto

Abre Menú de la página → Zoom de la página. Vuelve al 100% para establecer una base y luego ajústalo para mayor comodidad. En un Duo abierto, la guía de Apple incluye Zoom In, Zoom Out y Tamaño real. El zoom ayuda con la legibilidad, pero no puede restaurar una función omitida de la página.

2. Reduce el desorden al leer un artículo

Prueba Mostrar lector, si está disponible. Ocultar barra de herramientas también puede liberar algo de espacio; toca la parte inferior de la pantalla para que vuelva a aparecer. El lector es adecuado para páginas de lectura compatibles en lugar de paneles interactivos.

3. Compara una carga nueva en la posición que deseas

Si una página se desajusta después de abrir o cerrar Duo, guarda cualquier entrada inacabada y recárgala en la posición final. Compara la misma URL y la misma sección. Una carga nueva que funcione mejor indica un problema al manejar el cambio de tamaño; un resultado inalterado sugiere que lo siguiente es revisar el diseño o el modo de contenido del sitio.

4. Separa un problema de diseño de página de un problema de alcance

Un menú renderizado correctamente aún puede ser difícil de alcanzar en un Duo abierto. Para esa situación, nuestra guía de uso con una mano aborda cómo sostener y operar el teléfono. Cambiar la presentación del sitio web solo es útil si coloca los controles en un lugar más práctico.

Qué probar cuando el diseño siga siendo incómodo

1. Comprueba el zoom de la página antes de juzgar el tamaño del texto

2. Reduce el desorden al leer un artículo

3. Compara una carga nueva en la posición que deseas

4. Separa un problema de diseño de página de un problema de alcance

Qué debería ofrecer una mejor adaptación del sitio web de terceros

La mejora útil es la continuidad: encuentra una página en la pantalla exterior, abre Duo para trabajar con ella y continúa sin perder tu lugar ni luchar con la interfaz. Un buen diseño debe mantener el texto cómodo, poner los menús al alcance y dejar que las tablas o documentos usen el espacio adicional.

Nuestra visión es que esto hace de Safari un ejemplo cotidiano del desafío de software más amplio de Duo. Apple controla el navegador, mientras que los propietarios de los sitios web controlan el diseño de su página y gran parte de su comportamiento. Las actualizaciones del navegador pueden abordar los defectos de renderizado; un formulario de ancho fijo o una plantilla móvil inadecuada puede necesitar una actualización del sitio web.

Para los desarrolladores, la guía del Modo de diseño adaptable de WebKit proporciona un punto de partida para probar diferentes dimensiones y relaciones de aspecto. Las pruebas también deben cubrir el teclado, los menús abiertos y la transición entre diseños en el dispositivo. Una página de inicio que se vea bien en dos tamaños estáticos es solo una parte del trabajo.

Preguntas frecuentes

¿Por qué solo un sitio web tiene este problema?

Los diferentes sitios web utilizan diferentes plantillas, scripts y servicios integrados. Si otros sitios se comportan normalmente en la misma posición de la pantalla, informe de la URL afectada, la posición de la pantalla y los pasos para reproducirlo a ese sitio web. Las capturas de pantalla antes y después de abrir Duo facilitan la investigación del problema.

¿Una aplicación web en la pantalla de inicio solucionará el diseño?

Añadir un sitio a la pantalla de inicio no rediseña por sí solo su contenido. Puede ofrecer una experiencia de lanzamiento o de ventana diferente, pero el sitio subyacente aún necesita un diseño que funcione en el espacio disponible.