蝙蝠岛资源网

手机屏幕尺寸测试——手机的实际显示页面的宽度
网络编程 2024/12/23 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

手机站开发遇到一些问题，设计页面使用多大的尺寸？为此做了一些研究，除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>

标签：
手机,页面,宽度
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无手机屏幕尺寸测试——手机的实际显示页面的宽度的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com