En el diseño de sitios web que se mostrarán en iPhones y iPads, tenga en cuenta la relación de aspecto - la relación entre el ancho y la altura de una imagen o un vídeo. La relación de aspecto es particularmente importante cuando se trabaja con vídeo. A pantallas de TV de vídeo estándar en 4: 3 relación de aspecto (o 1: 1.33) - el formato casi cuadrado que generaciones de adictos boob tubo conocen y aman.

Básicamente, por cada 4 píxeles de ancho, 3 píxeles están abajo, por lo que la resolución de la pantalla de televisión de definición estándar es de 640 x 480. Recientemente, televisión de alta definición ha causado un movimiento a la proporción de 16: 9 (o 1: 1,85), también conocida como de pantalla ancha, y una resolución común es de 1280 x 720.

La relación de aspecto del iPhone es de 3: 2 (o 1: 1,5), que no es ni siquiera estándar. El iPad es 4: 3, como una señal de televisión tradicional. Para mostrar una imagen de pantalla ancha o de alta definición, tanto en el iPhone y el iPad utilizan la técnica letterboxing, que coloca barras delgadas, negro por encima y por debajo de la imagen.

En la figura, se ve el efecto de letterboxing cuando se reproduce un vídeo en una pantalla que no encaja en la relación de aspecto. Aparecen barras negras en la parte superior e inferior de este video de entrenamiento de la autora Janine Warner porque el video no se ajusta a la relación de aspecto de la pantalla.

En el iPhone, al visualizar un estándar de 4: 3 de vídeo, puede tocar para ampliar la imagen para llenar el espacio verticalmente - pero lo único que hace es recortar los bordes de cada lado. Si está trabajando con imágenes fijas que se recortan drásticamente (como en un paisaje panorámico), los usuarios ya sea verán un montón de espacio en blanco en la pantalla o que tenga que desplazarse mucho.