The mobile terminal automatically adjusts the page content and font size by setting rem

Mobile end pass setting rem Realize automatic adjustment of page content and font size

function setRem(){
    
	var rem = document.documentElement.clientWidth / 10;  //  Divide the screen width of the device into ten equal parts 
	document.documentElement.style.fontSize = rem + "px";  //  Set the document root font to the device width 1/10
}
setRem();
window.addEventListener("resize", setRem);  //  add to resize event , Adjust the document root font size synchronously when the window is adjusted 
window.addEventListener("pageShow", function(e) {
      //  add to pageShow event , Trigger... When the page is displayed 
	if(e.persisted) {
      //  Determine whether it is a page fetched from the cache ,true That is, the page fetched from the cache , Trigger the function that sets the root font 
		setRem();
	}
})

pageShow Events and load Events like , All functions are executed when the page is loaded , By clicking on a label ,F5 Refresh and click the forward and backward buttons to refresh the page and execute load event . But Firefox has a round-trip cache , Keep page data and DOM and JS state , That is, the entire page is cached , So clicking back cannot refresh the page , So you can go through pageShow Trigger , Trigger by judging whether it is a page fetched from the cache