Mobile phone screen size test - the width of the actual displayed page on the mobile phone

Mobile phone screen size test - the width of the actual displayed page on the mobile phone_Experience exchange

WBOY

Release： 2016-05-16 12:03:33

Original

2232 people have browsed it

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>

Copy after login