Apple comparte consejos sobre "Diseño de sitios web para iPhone X"

Apple ha publicado varios consejos para los desarrolladores para ayudarles a diseñar sitios web que se ven bien en el iPhone X

Su sitio web puede hacer uso de algunas nuevas piezas similares de WebKit API introducidas en iOS 11 para aprovechar al máximo la naturaleza de borde a borde de la pantalla.

La primera característica nueva es una extensión a la metaetiqueta de viewport existente llamada viewport-fit, que proporciona control sobre el comportamiento de inserción. viewport-fit está disponible en iOS 11.

Después de adoptar viewport-fit = cover, el siguiente paso es aplicar selectivamente el relleno a los elementos que contienen contenido importante, para asegurarse de que no estén oscurecidos por la forma de la pantalla. Para lograrlo, WebKit en iOS 11 incluye una nueva función CSS, constant () y un conjunto de cuatro constantes predefinidas, safe-area-inset-left, safe-area-inset-right, superior y área de seguridad-inserto-fondo. Cuando se combinan, permiten que las declaraciones de estilo hagan referencia al tamaño actual de las inserciones de áreas seguras de cada lado.

Para lidiar con un inserto de área segura de 0px cuando el iPhone se sostiene verticalmente, Apple sugiere utilizar las nuevas funciones CSS min () y max () que estarán disponibles en una futura versión Safari Technology Preview.

ejemplo: padding-left: max (12px, constante (safe-area-inset-left));

en la orientación vertical, constante (safe-area-inset-left) resuelve a 0px, por lo que la función max () se resuelve a 12px. En el paisaje, cuando la constante (safe-area-inset-left) es mayor debido a la carcasa del sensor, la función max () resolverá ese tamaño en su lugar, asegurándose de que el contenido importante siempre sea visible.

Más detalles en el siguiente enlace …