• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 22/02/2022

Classez les tailles d'écran des appareils iOS

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Pour aborder sereinement la question de la gestion des tailles d'écran, commençons par faire le tour des tailles que vous allez devoir gérer en iOS.

Appréhendez les tailles d'écran

On parle généralement des tailles d'écran en pouces (notés ''), et on mesure la diagonale.

En iOS, il y a deux grandes familles de tailles :

  • les tailles iPhone ;

  • les tailles iPad.

Dans chaque famille il y a plusieurs tailles différentes, que l’on retrouve dans le schéma ci-dessous.

Les différentes tailles en iOS sont résumées dans le tableau ci-dessous
Les différentes tailles en iOS

Appareil

Taille

iPad Pro Big 1, 2

12,9”

iPad Pro Small 2

10,5”

iPad 1, 2, 3, 4

iPad Air 1, 2

iPad Pro Small 1

9,7”

iPad Mini

7,9”

iPhone Pro Max 12, 13

6,7”

iPhone 11 Pro Max

6,5”

iPhone 11, 12, 13

iPhone Pro 12, 13

6,1”

iPhone X

5,8”

iPhone 6+, 6S+, 7+, 8+

5,5”

iPhone 6, 6S, 7, 8

4,7”

iPhone 5, 5S, SE

4”

iPhone 4s

3,5”

Ce tableau résume les douze tailles existantes dans la famille iOS avec la liste exhaustive de tous les appareils iOS associés. Inutile que vous connaissiez tout cela par cœur. Sachez seulement qu'il y a six tailles pour l'iPhone et six pour l'iPad. Et ces douze tailles, vous pouvez toutes les visualiser dans le storyboard !

Visualisez les tailles dans le storyboard

Pour changer la taille de l'interface dans le storyboard, il faut utiliser le sélecteur de tailles. En bas à gauche du storyboard, vous avez le bouton suivant :

Le bouton pour accéder au sélecteur de tailles
Le bouton pour accéder au sélecteur de tailles

Cliquez dessus pour révéler le sélecteur de taille.

Le sélecteur de tailles propose de différentes tailles d'écran iPhone et iPad
Vous pouvez changer de taille d'écran avec le sélecteur de tailles

Ici vous pouvez sélectionner la taille à laquelle vous souhaitez afficher les interfaces de votre storyboard. Par défaut, la taille est celle de l'iPhone 8 Plus, mais vous pouvez modifier ça à votre guise.

Je vous invite à jouer un peu avec les différentes tailles. Il y a trois réglages possibles :

  • la taille ;

  • l'orientation ;

  • l'adaptation.

La taille

La taille de l'écran permet de choisir tout simplement la taille d'écran que l'on souhaite visualiser.

Il y a bien huit tailles pour l'iPhone, mais il n'y a qu’une taille pour l'iPad ! Ils en ont oublié?

Bien vu ! Avec douze tailles disponibles en tout, Apple a voulu éviter d’afficher une trop longue liste. Mais essayez donc de cliquer sur l’iPad à droite de la liste, celle-ci va se mettre à jour instantanément en affichant les iPads disponibles, magique !

L'orientation

On peut décider d'afficher l'orientation paysage ou portrait en appliquant une rotation à l’affichage :

Le bouton pour changer l'orientation de l'écran
Le bouton pour changer l'orientation de l'écran

L'adaptation

Si vous choisissez l'un des iPads dans le sélecteur, un troisième réglage est disponible : l'adaptation.

Le bouton pour adapter l'écran sur iPad
Le bouton pour adapter l'écran sur iPad

En effet sur l'iPad, on peut afficher deux applications l'une à côté de l'autre. Apple appelle cela Split View. Du coup l'application ne prendra plus tout l'écran, il faut donc prévoir la variation de la taille de l'interface dans ce cas. Et c'est avec le réglage Adaptation qu'on peut le visualiser.

En résumé

  • Il y a douze tailles d'écran différentes pour les appareils iOS : quatre pour l'iPad et huit pour l'iPhone.

  • Comme avec le mode aperçu, dans le chapitre précédent, le sélecteur de taille vous permet donc de visualiser ce que donne votre application sur différents appareils directement dans le storyboard. Et vous pouvez voir que dès que l'on quitte l'iPhone 8 Plus, ça n'est pas très probant !

Dès la prochaine partie, nous allons commencer à résoudre ce problème ! Mais avant d’y plonger, vérifiez vos acquis dans le quiz. 😊 À tout de suite !

Exemple de certificat de réussite
Exemple de certificat de réussite