手机屏幕尺寸测试——手机的实际显示页面的宽度

首页

web前端

css教程

手机屏幕尺寸测试——手机的实际显示页面的宽度_经验交流

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:03 PM

宽度手机页面

手机站开发遇到一些问题，设计页面使用多大的尺寸？为此做了一些研究，除IPhone特殊一些外，目前市面上的安卓系统的实际显示页面的宽度，都是360px。

手机型号	竖屏宽度
IPhone 5	320px
IPhone 6	375px
IPhone 6 Plus	414px
Nexus 4	384px
Android(大多数)	360px

前两年，安卓的分辨率多数还是240px 或 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: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>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

vivo手机boost模式是什么意思Aug 30, 2022 pm 03:32 PM

vivo手机boost模式的意思是通过调度算法提升系统提频速度，提升突发重载应对能力；开启该模式能保持较高的CPU频率以提升系统运行性能，从而带来更快的使用效果从而达到提升系统流畅度，降低掉帧率的效果。

电池容量和额定容量有什么区别Oct 24, 2022 pm 12:00 PM

区别：1、电池容量是衡量电池性能的重要性能指标之一，它表示在一定条件下电池放出的电量，即电池的容量，通常以安培·小时为单位；额定容量是指铭牌上所标明的电机或电器在额定工作条件下能长期持续工作的容量。2、电池容量包含额定容量，电池容量按照不同条件分为实际容量、理论容量与额定容量。

移动办副卡需要什么条件Oct 21, 2022 am 10:58 AM

移动办副卡的条件：1、携带本人身份证（主卡户主）；2、主号要有最低流量套餐要求（各个地区要求不同）；3、副卡需要实名登记后才可激活；4、取消副号或解散群组生效后，副卡将会立即销号。

ipad和手机的区别是什么Oct 25, 2022 pm 02:01 PM

区别：1、屏幕尺寸不同，ipad尺寸比手机大。2、功能不同，ipad不能插SIM卡，没有通讯功能，不支持接打电话；手机可以插SIM卡，能够接打电话。3、硬件不同，ipad硬件配置要比手机高，不管是分辨率和处理速度都比iphone手机高一些。4、系统不同，ipad采用ipadOs系统，手机属于ios系统。

红米跟小米有什么区别Aug 18, 2022 pm 03:08 PM

区别：1、小米主打高端市场，而红米是中低端市场。2、小米手机的配置要比红米手机高。3、红米主要面临的是一些年龄稍微大一些的客户群体，而小米的受众群体就比较广泛了，从年轻人到老年人均可使用。4、小米主打的是公司自主设计而后交由第三方的厂商来处理，而红米主要是直接交由第三方工厂直接生产。5、红米会发售大量机型，走广撒网的路线，而小米每年发售的机型少，走少而精的路线。