Some things to note about mobile-Phone web pages

1, the viewport of the wording

<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" >

Width is set to device width (phone screen width), default zoom is set to no scale, user can manually zoom set to "no"

2. What is Device-width specific?

The first generation of the iphone, the resolution is 320*480, the screen size is 3.5 inch (note that this 3.5-inch is the diagonal width of the screen), this time Device-width is 320px, is also the resolution of the phone wide, device-width is the device wide. But the second generation of the iphone resolution to 480*960, screen size is still 3.5 inches, if the device-width or device width, then the same 320px page put 480*960 mobile phone screen, the text will become smaller, and will affect its readability. So IPHONE4/5 's device-width has been maintained at 320px,ipad for 1024PX, but Iphone6/6+ 's device-width has become 375px/414px. At this time, Device-width is not a device wide (also not the width of the resolution), is an intermediate layer. Android also uses this concept, its device-width value is 360, but there are many such as 540px and 600px such a wonderful. After setting the <meta/> Tag, the device-width value can be window.innerwidth to get the Device-width value.

Device-width is an intermediate layer, for iphone4/5,device-width is 320px; for Iphone6/6+,device-width is 375px/414px; for Android phones, The device-width is mostly 360px.

References from the mouth to the mouth of a van

3, <meta content= "yes" name= "apple-mobile-web-app-capable" >

Hide the navigation bar of an Apple phone

4, the Phone "screen width" and "screen resolution" difference

When writing a mobile-phone page, just consider the "screen width"

Various types of mobile phones device-width and Device-height

iphone4	320	480
Iphone5	320	568
Iphone6	375	667
iphone6+	414	736
Ipad	1024
Android	360

Therefore, in order to fit the size of all mobile phones, generally the content width of the Web page is set to 320px;

5, when testing mobile Web static page on the phone, you can open a Web server at the source file root path

Python-m simplehttpserver 8080

Note: The phone and PC are connected in the same LAN

, you can convert the URL to a QR code

Some things to note about mobile-Phone web pages