Conception Web responsive et écrans haute résolution (iPhone 4/5)

J'ai récemment commencé à jouer autour avec le responsive web design et ont fait un test de base ici:

http://test.studev.net/

Il fonctionne très bien dans un navigateur de bureau, cependant je suis un peu confus sur la façon de traiter avec la plus petite largeur de la conception lorsqu'il est chargé sur une haute résolution de l'appareil par exemple des écrans retina sur iphone. En raison de ce type d'écran, cela signifie par exemple la taille de 16px ce qui est normal pour le lire sur un ordinateur de bureau est impossible de le lire sur un iPhone 4/5.

Comment est-ce habituellement traitées?

source d'informationauteur stu177

  1. 15

    Bien soit, si vous voulez réduire la taille du texte sur mobile ou plus, vous ne 

    @media screen and (max-width: 480px) {
    font-size: 10px; /* Smaller */
}

    ou

    @media screen and (max-width: 480px) {
    font-size: 20px; /*Larger*/
}

    Et assurez-vous que vous avez cela dans votre <HEAD> tag:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    Ou vous pouvez également désactiver le zoom de la sorte:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    Et pour IE10 soutien, essayez:

    @-ms-viewport{
    width:device-width
}
  2. 6

    Vous pouvez choisir la taille de la police en fonction de l'écran-largeur:

        /* Large desktop */
    @media (min-width: 1200px) {
        font-size: 18px;
    }

    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) {
        font-size: 16px;
    }

    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) {
        font-size: 14px;
    }

    /* Landscape phones and down */
    @media (max-width: 480px) {
        font-size: 12px;
    }

    Pour vous assurer que votre mise en page stretch sur le mobile de l'écran, vous devez utiliser la fenêtre d'affichage de la balise meta:

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    Cette balise meta doit être à l'intérieur de la balise head. Le "device-width" sera le nombre maximum de pixels de votre écran peut afficher. Vous pouvez également définir une valeur constante (600px).

    Initial-scale=1 signifie qu'il sera agrandie automatiquement à 100%. (0.5 => 50%)