In this project, to understand the problem of the viewport, the following is the narration of the viewport.
Meta viewport settings
Why use a viewport to set:
Defines the width of the viewport as device width, initial scaling of 1 time times, maximum and minimum zoom multiples of 1, prohibit user scaling
<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, User-scalable=0″>
This is a lot of mobile phone developers to let the user feed to the full web experience and set a false viewport width, to deceive the browser this screen can load so many
Content, and the specific pixel is 980px, as to whether there are other pixels, currently do not know, this experience is first implemented by Apple. So the iphone is 980px.
This is independent of the phone resolution.
Sets the viewport to its viewport's actual size to render the page.
Test code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Body> <H1></H1> <Script> varoH1=document.getElementsByTagName ("H1")[0]; Oh1.innerhtml=Document.documentElement.clientWidth; </Script></Body></HTML>
You can use the Debug tool to debug the mobile device mode, you can observe the different phone resolution and use the same width of 980px.
If you set the <meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, User-scalable=0″>,
It turns out to be different, with the same viewport width and resolution.
Introduce a JS library, specifically check the device: Device.js
Technical summary of Mobile Terminal project
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
