Pourriez-vous me dire comment réparer une mise en page HTML automatiquement avec la résolution de l'écran? Exemple, je code HTML en résolution d'écran de 1024 par 768 pixels. Si je passe à 800 par 600 pixels, je veux que mes fenêtres HTML changent automatiquement pour réparer l'écran.Mise à l'échelle de la disposition HTML à la taille de l'écran
Comment est-ce que je pourrais faire cela?
Vous n'avez pas besoin d'utiliser javascript. Il suffit de définir la largeur de votre élément (div, table, etc) à 100% dans le fichier CSS. Ensuite, il s'ajustera en fonction de la largeur de la fenêtre. (la même chose à la hauteur)
<!-- in yourHtml.html file -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="yourStyleSheet.css" />
</head>
<body>
<div class="fullWidth">
Your content
</div>
</body>
</html>
<!-- in yourStyleSheet.css file -->
div.fullWidth {
width:100%;
height:100%;
background-color:#CCC;
}
Si vous voulez parler de la fenêtre du navigateur réel, Javascript screen.width et screen.height qui renvoient la résolution actuelle; voir examples of use. Sur une page Web particulière, vous pouvez définir un script à exécuter sur une minuterie pour vérifier si ces valeurs ont changé, et redimensionner la fenêtre si elles l'ont été. Cela semble une réussite particulière - les résolutions d'écran changent très rarement, et vous devriez être sur la page particulière qui contient ce script JS pour que cela fonctionne. Notez également que les propriétés width et height ne tiennent pas compte de l'emplacement des barres d'outils, de sorte que la fenêtre peut disparaître derrière. C'est aussi un mauvais comportement puisque la maximisation automatique remplace ce que l'utilisateur peut préférer.
Votre question est vague alors j'essaie de vous aider avec quelques exemples qui pourraient être liés à votre problème.
Si vous avez besoin pour obtenir la taille de la fenêtre du navigateur en utilisant JavaScript, est un exemple ici:
function getClientSize() {
var width = 0, height = 0;
if(typeof(window.innerWidth) == 'number') {
width = window.innerWidth;
height = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
width = document.body.clientWidth;
height = document.body.clientHeight;
}
return {width: width, height: height};
}
Pour détecter programmation redimensionnement de la fenêtre du navigateur, fixez un écouteur à l'événement window.onresize. Notez que l'exemple simplifié suivant ne se soucie pas s'il est déjà un écouteur attaché (utilisation addEventListener/attachEvent selon le cas à la place):
window.onresize = function() {
var size = getClientSize();
alert("Width: " + size.width + ", Height: " + size.height);
}
Par fenêtre HTML, je suppose que vous parlez de contenu HTML et pas la fenêtre du navigateur.
Si c'est le cas, les mots-clés pour ce que vous voulez faire sont liquid/fluid/elastic design.
Vous pouvez lire Elastic Design by Patrick Griffiths sur le site A List Apart, ou search google for liquid design.
c'est très étrange, la [page de démonstration] (http://www.htmldog.com/articles/elasticdesign/demo/) ne correspond pas à mon moniteur plus large (c'est ce que je m'attendais à faire) ... ? –
Je ne suis pas sûr de comprendre la question. Demandez-vous comment rendre un navigateur redimensionner automatiquement ses fenêtres pour s'adapter à la résolution d'écran maximale? –