Home >Web Front-end >CSS Tutorial >Mobile phone screen size test - the width of the actual displayed page on the mobile phone_Experience exchange
Mobile phone screen size test - the width of the actual displayed page on the mobile phone_Experience exchange
- WBOYOriginal
- 2016-05-16 12:03:332251browse
mobile website development encounters some problems. what size should be used to design the page? i did some research on this and found that, except for the special iphone, the actual display page width of the android systems currently on the market is 360px.
| mobile phone model | vertical screen width |
| iphone 5 | 320px |
| iphone 6 | 375px |
| iphone 6 plus | 414px |
| nexus 4 | 384px |
| android(most) | 360px |
in the past two years, most android resolutions were 240px or 320px. now it is 360px. in order to be backward and upward compatible, 360px was finally set as the design size. in the later stage, css3 media queries or media query features can be used. further compatibility, compatibility with other devices, and horizontal screen compatibility of some devices.
attached: js code for screen size test, as follows
<!DOCTYPE html> <html> <head> <title>屏幕尺寸测试</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes" /> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> </head> <body style="padding:0px;margin:0px;" scroll="no"> <script language="javascript"> var s = ""; s += "网页可见区域宽："+ document.body.clientWidth; s += "<br>网页可见区域高："+ document.body.clientHeight; s += "<br>网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)"; s += "<br>网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)"; s += "<br>网页正文全文宽："+ document.body.scrollWidth; s += "<br>网页正文全文高："+ document.body.scrollHeight; s += "<br>网页被卷去的高："+ document.body.scrollTop; s += "<br>网页被卷去的左："+ document.body.scrollLeft; s += "<br>网页正文部分上："+ window.screenTop; s += "<br>网页正文部分左："+ window.screenLeft; s += "<br>屏幕分辨率的高："+ window.screen.height; s += "<br>屏幕分辨率的宽："+ window.screen.width; s += "<br>屏幕可用工作区高度："+ window.screen.availHeight; s += "<br>屏幕可用工作区宽度："+ window.screen.availWidth; s += "<br>你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; s += "<br>你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; document.write(s); </script> </body> </html>