手机网站开发设计碰到一些难题,设计方案网页页面应用多少的规格?因此干了一些科学研究,除IPhone独特一些外,现阶段目前市面上的安卓手机系统的具体显示信息网页页面的总宽,全是360px。

手机的型号 竖屏总宽
IPhone 5 320px
IPhone 6 375px
IPhone 6 Plus 414px
Nexus 4 384px
Android(大部分) 360px

前2年,安卓系统的屏幕分辨率大部分還是241080x 或 320px,现在是360px,为了更好地往下兼容,往上也兼容,最后将 360px 列入设计方案的规格,中后期能够 应用CSS3 Media Queries即媒体查询特性做进一步的兼容,兼容别的机器设备,及其做一些机器设备的全屏的兼容。

附:显示屏尺寸检测的JS编码,以下

<!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:1080x;margin:1080x;" 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>