Comment changer javascript en fonction de la taille de la page

JavaScript est un langage de programmation largement utilisé pour l'interactivité sur les pages web. Lors du développement de pages Web, nous devons souvent modifier la façon dont le contenu Web est affiché en fonction de la taille de la page. Cet article explique comment utiliser JavaScript pour modifier la mise en page et le style des éléments de page Web en fonction de la taille de la page.

1. Obtenez la taille de la page

Tout d'abord, nous devons obtenir la taille de la page. Vous pouvez utiliser le code suivant pour obtenir la largeur et la hauteur de la page :

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

Les propriétés innerWidth et innerHeight de l'objet window sont utilisées ici, qui représentent respectivement la largeur et la hauteur visibles de la page. Il convient de noter que la taille de la page obtenue par cette méthode peut être affectée par les barres d'outils et les barres de défilement du navigateur.

Si vous souhaitez obtenir la largeur et la hauteur réelles du contenu de la page Web, vous pouvez utiliser le code suivant :

var pageWidth = document.documentElement.scrollWidth;
var pageHeight = document.documentElement.scrollHeight;

Les attributs scrollWidth et scrollHeight de l'objet document sont utilisés ici, qui représentent respectivement le contenu de la page Web. La largeur et la hauteur réelles, y compris la partie invisible du contenu. Il convient de noter que si la page Web n'a pas suffisamment de contenu, la largeur et la hauteur réelles peuvent être inférieures à la partie visible.

2. Modifier le contenu Web en fonction de la taille de la page

Après avoir obtenu la taille de la page, nous pouvons modifier dynamiquement le contenu Web en fonction de la taille de la page. Voici quelques scénarios d'application courants :

1. Modifier la mise en page de la page Web en fonction de la largeur de la page

Du côté mobile, nous changeons généralement la mise en page de la page Il s'agit d'une mise en page verticale pour s'adapter à l'affichage vertical des écrans de téléphones portables. Sur le bureau, nous utilisons généralement une disposition horizontale. Le code suivant peut sélectionner différentes mises en page en fonction de la largeur de la page :

if (pageWidth < 768) {
  // 移动端布局
  // ...
} else {
  // 桌面端布局
  // ...
}

Ce code utilise l'idée des requêtes multimédias pour sélectionner différentes méthodes de mise en page en jugeant la largeur de la page. Le code de mise en page correspondant peut être écrit dans l'instruction if.

2. Changer la taille de la police de la page web en fonction de la largeur de la page

Côté mobile, en raison de l'écran du téléphone portable plus petit, le web La taille de la police de la page doit être réduite de manière appropriée pour être lisible par les utilisateurs. Le code suivant peut ajuster automatiquement la taille de la police de la page Web en fonction de la largeur de la page :

if (pageWidth < 768) {
  // 移动端字体大小
  document.body.style.fontSize = "14px";
} else {
  // 桌面端字体大小
  document.body.style.fontSize = "16px";
}

Ce code utilise l'attribut style de l'objet document pour définir le style CSS dans la page Web. Utilisez les instructions if pour sélectionner différentes tailles de police en fonction de la largeur de la page.

3. Changer la position des éléments de la page Web en fonction de la hauteur de la page

Dans certaines pages Web qui nécessitent un défilement, nous pouvons contrôler la position de éléments de page Web basés sur la hauteur de la page. Par exemple, vous pouvez faire apparaître un bouton « retour en haut » lorsque vous faites défiler vers le bas. Le code suivant peut réaliser cette fonction :

window.onscroll = function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > pageHeight * 0.8) {
    // 显示“返回顶部”按钮
    document.getElementById("back-to-top").style.display = "block";
  } else {
    // 隐藏“返回顶部”按钮
    document.getElementById("back-to-top").style.display = "none";
  }
}

Ce code utilise l'événement onscroll de l'objet window, qui peut déclencher le code correspondant lorsque la page Web défile. En calculant la distance de défilement scrollTop, déterminez s'il a défilé vers le bas de la page. Si la distance de défilement dépasse 80% de la hauteur de la page, le bouton "Retour en haut" s'affiche, sinon il est masqué.

3. Résumé

JavaScript est l'un des outils courants pour développer des pages Web dynamiques. Lors de la modification du contenu d'une page Web en fonction de la taille de la page, nous pouvons utiliser JavaScript pour obtenir la taille de la page et modifier dynamiquement la mise en page, le style et la position des éléments de la page Web en fonction de la taille de la page. Grâce à l'utilisation flexible des scripts JavaScript, les pages Web peuvent être correctement affichées sur différents appareils et tailles d'écran, améliorant ainsi l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!