Portion non-Rétine et les écrans de la Rétine avec une base de code: cadre pour la généralisation des mises en page et des actifs pour les applications HTML5 sur les iPhones ou les appareils iOS?

Notre objectif est d'imiter ce que les développeurs peuvent faire avec les applications iOS natives: c'est, utiliser une mise en page unique, basé sur des unités, pour accueillir les écrans de la Rétine (640x960) et non les écrans de la Rétine (320x480).

Tous les iOS, les développeurs ont besoin pour faire est de l'approvisionnement de deux ensembles d'éléments, l'un pour la Rétine et pour les non-Retina, et la conception de leurs mises en page, en termes relatifs, appelés unités. Fourni devs suivre une certaine convention de nommage, iOS détecte automatiquement l'utilisateur, la taille de l'écran et utilise les actifs et les échelles de la mise en page en conséquence.

Cela signifie que les développeurs peuvent servir de deux bases d'utilisateurs avec une seule base de code.

Faire les cadres existent pour aider HTML5 devs accomplir la même chose?

Qu'ont les gens de faire pour un service non-Rétine et les écrans de la Rétine tout en minimisant le code dupliqué?

Merci!

OriginalL'auteur Crashalot | 2011-10-11

  1. 17

    Il y a deux choses simples que vous pouvez faire pour faire fonctionner vos pages dans les deux modes.

    Tout d'abord, vous définissez votre fenêtre avec une balise meta dans le head document. Cela vous donnera une largeur de page de 480 en paysage et 320 dans le portrait. Vous pouvez vérifier quelle orientation vous êtes en utilisant le CSS media queries.

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

    Deuxième, servir des images de la rétine pour toutes vos images à l'aide de la CSS background-size de la propriété. Depuis votre page virtuelle largeur est 320px, chaque pixel est vraiment 2px par 2px sur un écran retina. Si vous servez un 40x40 image dans une zone de 20x20, les écrans de la rétine va le montrer comme il est, et non les écrans de la rétine à l'échelle en bas de la pixels.

    .my-button {
    width:  20px;
    height: 20px;
    background-image: url(retina-images/my-button-40x40.png);
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px;
}

    Cela devrait aussi fonctionner si vous utilisez une balise d'image:

    <img src="retina-images/my-button-40x40.png" width="20" height="20">

    Vous pourriez probablement faire plus de travail pour vérifier la taille réelle de l'écran et de servir de plus petites images pour les non-retina foule, mais je ne pense pas que l'avantage sera que dramatique.

    Merci, Brian! Ce sujet de présentation? Devrions-nous utiliser em unités de soutien pour l'espacement entre les éléments au lieu de pourcentages?
    Qui dépend beaucoup de ce que vous essayez de faire. Si vous avez deux éléments les uns à côté des autres, qu'prendre jusqu'à 48% de l'écran de chacun, l'écart va augmenter lorsque vous faites pivoter le téléphone en mode paysage. Je voudrais vous recommandons de faire prendre jusqu'à 50% chacun, mais alors rembourrage avec em ou px ou n'importe quoi vraiment. Avec la fenêtre d'affichage, vous avez presque garanti que 1px seront de la même taille sur tous les appareils de sorte que vous n'avez pas vraiment à s'inquiéter autant de dimensions par rapport à la taille de police que vous le feriez sur d'autres plates-formes.
    Une chose à garder à l'esprit est que sur certaines (Android) appareils, 50% + 50% > 100% ou même 33% * 3 > 100%. Souvent, les gens auront lieu les divs à côté de l'autre à l'aide de display:inline-block qui est un flux de mise en page qui va se renverser à la ligne suivante sur ces appareils. Je recommande toujours d'utiliser le positionnement absolu ou display:table-cell pour ce genre de mise en page de la construction.

    OriginalL'auteur Brian Nickel

  2. 6

    Chaque unité que vous utilisez sur un Affichage de la Rétine est toujours le même, donc tout ce que vous devez faire est de remplacer toutes les images avec un 2x version.

    Vous pouvez utiliser window.devicePixelRatio pour détecter si votre application web est en cours d'exécution sur un Écran Retina. Si window.devicePixelRatio > 1, alors c'est un Écran Retina. Ensuite, vous pouvez remplacer chaque image sur le côté client:

    1. recherche de toutes les <img /> et remplacer src attribut.
    2. recherche de toutes les css et remplacer background-image.
    3. si vous utilisez canvas, créer un 2x densité et l'utilisation 2x images. Cela signifie que lorsque vous travaillez avec un 100px * 100px <canvas></canvas> élément, un ensemble de son contenu à 200px * 200px.
    si vous utilisez les requêtes des médias, vous n'avez pas besoin de "remplacer" vous pouvez tout simplement faire une installation spéciale qui détecte les dpi et puis remplace les décors.
    Oui, et qui s'applique à CSS. Vous avez encore besoin pour couvrir non-CSS images à l'aide de JavaScript. J'espère qu'il y a un nouveau standard de l'obtention de ce couvert.
    non, je veux dire, vous pouvez créer une requête de média pr. type de résolution d'inclure les images de droite pour la résolution spécifiée.

    OriginalL'auteur Cat Chen