web-dev-qa-db-fra.com

Comment créer des pages HTML qui ajustent automatiquement leurs images à différentes tailles d'écran pour mobile?

Je souhaite créer des pages HTML qui seront affichées sur différents appareils mobiles. Je veux qu'ils s'adaptent automatiquement aux différentes tailles d'écran mobile.

Les pages HTML incluent du texte et des images. Les images peuvent avoir une taille supérieure à 600 x 450, mais si l’écran du mobile est (par exemple) de 280 x 320, les images doivent alors s’ajuster automatiquement à leur taille.

Comment puis-je faire ceci?

androidhtmlhtml5mobile
10
Ekky

Si les pages dont vous parlez ne contiennent que du texte et des images, je pense que tout ce que vous devez faire dans chaque page HTML est le suivant:

  1. Ajoutez cette balise méta viewport à l'intérieur de la balise <head>:

    <meta name="viewport" content="width=device-width">

    Ceci devrait rendre la page rendue à une taille raisonnable.

  2. Ajoutez cette balise <style> à l'intérieur de la balise <head>:

    <style>
img {
    max-width: 100%;
}
</style>

    I think cela garantira que toutes les images ne seront pas plus larges que la fenêtre d'affichage de l'application Web.

    (Si cela ne fonctionne pas, essayez plutôt width: 100%;. Toutes les images seront donc aussi larges que la fenêtre d'affichage, donc pas plus larges.)

Cependant, votre question est un peu trop générale: nous pourrions finir par écrire un livre couvrant toutes les possibilités. Pourriez-vous préciser davantage le code sur lequel vous travaillez?

12
Paul D. Waite

Cette technique est connue sous le nom de disposition fluide ou adaptative, il y a une bonne introduction ici

3
VahidNaderi

Les requêtes multimédia sont le meilleur moyen de faire ce que vous voulez.

Configurez votre code HTML et votre feuille de style comme d'habitude, mais utilisez un code similaire à celui décrit ci-dessous à la fin de votre document CSS. Vous aurez besoin de résoudre les différentes requêtes pour les différentes largeurs et dispositions de périphérique. Commencez.

/* iPHONE 3-4 + RETINA PORTRAIT STYLES */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
    /* Your adjusted CSS goes here */
}

/* iPHONE 3-4 + RETINA LANDSCAPE STYLES */
@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
    /* Your adjusted CSS goes here */
}
1
evilscary

Il y a beaucoup d'options ici, la plus loin détaillée à traiter dans une seule question. 

Il n'y a pas de moyen "automatique" de le faire - il faudra le coder manuellement. Je peux penser à trois options, qui nécessiteront plus d'investigation:

  1. Utilisez l'en-tête http User-Agent pour identifier le périphérique qui se connecte et redirigez l'utilisateur vers le modèle de site Web requis.
  2. Utilisez JavaScript pour faire comme ci-dessus.
  3. Utilisez CSS pour contrôler la taille de chaque objet. Vous pouvez forcer chaque objet à représenter un pourcentage de la taille globale de l'écran plutôt qu'une valeur fixe. CSS fournit également un moyen de spécifier des styles en fonction d’une taille d’écran donnée: http://www.w3.org/TR/css3-mediaqueries/
0
JAC2703

vous pouvez utiliser l’interrogation multimédia pour rendre votre mise en page réactive, c’est-à-dire corriger tous les écrans, petits, moyens et grands. 

pour plus de détails, vous pouvez visiter ce tutoriel - apprendre le responsive design en étapes faciles

0
samir panchal