Comment le programme d'installation de HTML pour les Appareils mobiles avec un en-tête de l'image, qui prend toute la largeur du navigateur?

mon souci est que je dois créer un site web pour les appareils mobiles. Le concept est un ensemble d'images comme en-tête de.

Le problème est maintenant: les Différents smartphones ont différentes résolutions d'écran.

Il y a par exemple 840x560, 480x320 ou de 800x480.

Que dois-je écrire que les méta-tags, css, etc. pour ajuster l'image dans "tous" les smartphone moderne à l'écran?

J'espère que ma préoccupation a été clairement décrit.

Merci, Chris

voyant que vous souhaitez réduire le "scaling" (déduit de votre réponse à @Vinzius), ont un oeil à le modifier à ma réponse, et d'évaluer si @media queries pourrait aider.

OriginalL'auteur ChrisBenyamin | 2010-10-04

  1. 7

    Parce que width: 100%; semble être bien pris en charge que je vous suggère:

    #header {
    width: 100%;
    padding: 0;
    margin: 0;
}
#header img {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
}


<div id="header">
    <img src="header.png" />
</div>

    ou

    #header img {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
}

<img src="header.png" />

    réglage juste la width signifie que l'image du rapport largeur/hauteur sera conservée par le navigateur. Gardez à l'esprit, cependant, que la substitution de manipulation de l'image (la mise à l'échelle/redimensionnement) pour le navigateur du téléphone pourrait entraîner la moins jolie des artefacts introduits.

    Si vous avez la possibilité d'utiliser différentes tailles d'images, vous pouvez appeler ceux qui utilisent @media queries:

    <link rel="stylesheet" href="mobileStylesheet1.css" media="only screen and (max-device width:840px)"/>
<link rel="stylesheet" href="mobileStylesheet2.css" media="only screen and (max-device width:800px)"/>
<link rel="stylesheet" href="mobileStylesheet3.css" media="only screen and (max-device width:480px)"/>

    Et, dans ces feuilles de style, qui définit:

    mobileStylesheet1.css

    #header {
background: transparent url(path/to/840pxImage.png) 0 50% no-repeat;
}

    mobileStylesheet2.css

    #header {
background: transparent url(path/to/800pxImage.png) 0 50% no-repeat;
}

    mobileStylesheet3.css

    #header {
background: transparent url(path/to/480pxImage.png) 0 50% no-repeat;
}
    Cela semble vraiment la bonne chose à faire
    merci - meilleure voie à suivre 😉
    Il n'y a pas de quoi =)
    C'était vraiment intéressant.

    OriginalL'auteur David Thomas

  2. 4

    En plus de David Thomas réponse, vous aurez probablement besoin de régler la fenêtre d'affichage de la balise meta:

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

    Garder à l'esprit qu'il existe d'autres propriétés pour la balise meta, mais ces deux là sont probablement ceux dont vous avez besoin.

    Vous pouvez également donner une largeur d'un pixel de valeur. "device-width" essentiellement définit la largeur de la fenêtre d'affichage du navigateur à la largeur du téléphone, ce qui est probablement ce que vous voulez. Par la suite, un simple largeur 100% sur n'importe quel élément doit faire rentrer le téléphone exactement. Vous pouvez combiner cela avec David Thomas @media query réponse à la réalité de permuter les images de plus près adapter le téléphone afin de ne pas autant mise à l'échelle est impliqué. Plus "moderne" navigateurs mobiles appui de la fenêtre d'affichage de la balise meta. (Cela dépend vraiment de ce que votre définition de smartphone moderne est.)

    Voir aussi: width=device-width ne fonctionne pas dans IE Mobile

    OriginalL'auteur Nate Bundy

  3. 2

    Je pense que la meilleure solution est d'avoir une image + couleur d'arrière-plan de l'en-tête (ou motif).

    Par exemple :

    <div class="header">
  <img src="image.png">
</div>

    La largeur/hauteur de l'image.png est fixe et en-tête de catégorie a quelque chose comme :

    .header {
  display:block;
  background-color:#;
  background:url("") repeat;
}

    Alors il devrait s'adapter à tous les appareils. Mais si vous voulez quelque chose de mieux, peut-être que vous devriez faire un modèle MVC et disposent d'une vue pour chaque appareil (ou les plus importants ^^)

    Bonne Chance !

    Non, ce n'est pas possible. De ses une image, qui doit s'adapter.
    Ok, mais cela à l'échelle de l'image... donc je ne pense pas que c'est une bonne solution. Toutefois essayer un width:100% sur l'image ou une sorte de script JS pour identifier la largeur de l'écran.

    OriginalL'auteur Vinzius

  4. 0

    Identifier le téléphone de l'Agent de chaîne et de servir de différentes images.

    Je n'ai pas voter, mais je ne pouvais imaginer que c'est parce que tu recommandée browser sniffing, qui est très faillible, depuis que les navigateurs ne s'identifient pas de manière cohérente et participer activement à mal identifier eux-mêmes à votre demande. détection d'Objet est souvent la meilleure façon d'atteindre le même ou similaire, le résultat final.
    Merci @David Thomas.

    OriginalL'auteur Prof. Falken