Shulou(Shulou.com)06/01 Report--

I would like to share with you how to adapt web pages on html5 mobile. I believe most people don't know much about it, so share this article for your reference. I hope you will learn a lot after reading this article. Let's learn about it together.

First of all, because the demand is to adapt to both ends of the screen, so at first I want to write css with rem, but there will still be a situation where the font and layout will not be scaled proportionally. Later, I found a zoom configuration that js code does for the root element, plus the settings of rem and this js can do proportional scaling.

Download the plug-in and modify the scale (change 50375 to 25 if ui size is 750,375), and restart vscode after modification

two。 Create a new index.js, copy the code below, and you can use it.

/ / adaptation compatibility (function (doc, win) {console.log (doc, win) / / var docEle = doc.documentElement; const dpr = Math.min (win.devicePixelRatio, 3), scale = 1 / dpr, resizeEvent = 'orientationchange' in window? 'orientationchange':' resize'; var recalCulate = function () {var docEle = document.documentElement, w = docEle.clientWidth, num = (w > 750750: W) / 750; / / * * this is the size of your draft docEle.style.fontSize = (num * 100) .tofixed (1) + 'px';}; recalCulate (); if (! doc.addEventListener) return Win.addEventListener (resizeEvent, recalCulate, false);} (document, window); these are all the contents of this article entitled "how to adapt to the Web on html5 Mobile". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.