How to change javascript according to page size

JavaScript is a programming language widely used for interactivity on web pages. When developing web pages, we often need to change the way web content is displayed based on the page size. This article will introduce how to use JavaScript to change the layout and style of web page elements according to the page size.

1. Get the page size

First, we need to get the page size. You can use the following code to get the width and height of the page:

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

The innerWidth and innerHeight properties of the window object are used here, which represent the visible width and height of the page respectively. It should be noted that the page size obtained by this method may be affected by browser toolbars and scroll bars.

If you want to get the actual width and height of the web page content, you can use the following code:

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

The scrollWidth and scrollHeight properties of the document object are used here, which represent the actual width and height of the web page content respectively. Height, including the invisible part of the content. It should be noted that if the web page does not have enough content, the actual width and height may be smaller than the visible part.

2. Change the web page content according to the page size

After obtaining the page size, we can dynamically change the web page content according to the page size. The following are some common application scenarios:

1. Change the web page layout according to the page width

On the mobile side, we usually change the layout of the page to a vertical layout to adapt Portrait display of mobile phone screen. On the desktop, we usually use a horizontal layout. The following code can select different layouts based on page width:

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

This code uses the idea of ​​media query to select different layout methods by judging the page width. The corresponding layout code can be written in the if statement.

2. Change the font size of the web page according to the page width

On the mobile side, due to the smaller screen of the mobile phone, the font size of the web page needs to be appropriately reduced to facilitate user reading. The following code can automatically adjust the font size of the web page according to the page width:

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

This code uses the style attribute of the document object to set the CSS style in the web page. Use if statements to select different font sizes based on page width.

3. Change the position of web page elements according to the page height

In some web pages that require scrolling, we can control the position of web page elements based on the page height. For example, you can make a "back to top" button appear when you scroll to the bottom. The following code can achieve this function:

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";
  }
}

This code uses the onscroll event of the window object, which can trigger the corresponding code when the web page scrolls. By calculating the scroll distance scrollTop, determine whether it has scrolled to the bottom of the page. If the scroll distance exceeds 80% of the page height, the "Back to Top" button is displayed, otherwise it is hidden.

3. Summary

JavaScript is one of the common tools for developing dynamic web pages. When changing web page content based on page size, we can use JavaScript to obtain the page size and dynamically change the layout, style, and position of web page elements based on the page size. Through the flexible use of JavaScript scripts, web pages can be displayed well on different devices and screen sizes, improving user experience.

The above is the detailed content of How to change javascript according to page size. For more information, please follow other related articles on the PHP Chinese website!