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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索手机
, 页面
宽度
word页面宽度、js 获取页面宽度、衣柜宽度尺寸、jquery 获取页面宽度、滚动条占用了页面宽度,以便于您获取更多的相关知识。

时间: 2024-10-14 01:27:26

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

用CSS来控制图片显示大小的代码_经验交流

复制代码 代码如下: img,a img{      border:0;       margin:0;       padding:0;      max-width:590px;      width:e­xpression(this.width>590?"590px":this.width);      max-height:590px;      height:e­xpression(this.height>590?"590px":this.he

手机屏幕尺寸扩展是如何影响用户体验设计的

  造型千奇百怪的小屏手机叱咤风云的时代已经一去不复返了.事实上,近几年的行业趋势表明大屏手机,或者说巨屏手机,将会在很长的时间内占据主流.而现在,也是时候总结一下过去几年里,面对大屏手机时,设计师的失职. 如何界定大屏手机? 其实简单称之为大屏也不是特别准确,它的英文名称更为形象:Phone+Tablet=Phablet ,也就是说,它是传统手机和平板的结合体,Phablet. 因此,这些大屏手机实际上是超过我们手掌习惯的.可掌控的尺寸,但是又没有达到平板的级别.更准确的说,是屏幕尺寸在5~6

当标题不能显示完整的解决方法_经验交流

其实建议用css控制超出隐藏显示 也就是标题因为设计的宽度问题所以没有显示全,看样子是使用程序来截字的.我想很多网站都遇到这样的情况.为了视觉效果不得不进行截字显示以满足网站的整体视觉效果.通常我们采用截字的方法是两种,一种是通过后台输出时来事先设定一定的字符数量.另一种是通过CSS或是JS来对已经输出的完整的内容进行视觉剪截. 在网页标准没有兴起的时候基本上是采用第一种方式来解决这个问题,直到现在这种方式依然被广泛地使用着.这种方式的好处就是可以准确的剪截字数,而不足可能就是因为剪截的工作在后

Firefox返回时Iframe的显示Bug的解决方法_经验交流

<script type="text/javascript">//<![CDATA[ if(getCookie('firefoxIframe')){ document.write('<p id="addAd"><a href="cookie.html">点击这里删除这个iframe</a></p>'); document.write('<iframe height="

关于Firefox中的Flash不可以显示透明效果的问题_经验交流

由于自己站点的首页用了透明Flash.在IE核心的浏览器显示一切正常.可到了Firefox里面就没有了透明效果,特别是有些站点用的是全页面的透明Flash这样鼠标不能穿透,真就伤脑筋了.今天特地到Firefox社区去寻找答案去了.结果是我们的代码不标准,还好我用的Flash不多.赶紧改了试试.[sleepy]问题解决. 原来要在Embed标签下加上wmode="transparent"这个属性. 相关代码如下:  程序代码 复制代码 代码如下: <embed src="

用css来控制图片大小显示的实现方法与代码_经验交流

有时候图片太大,会破环网页整齐的布局.这时可以用css来强制按比例压缩图片的高度或宽度 css代码如下: img,a img{ border:0;  margin:0;  padding:0; max-width:590px; width:expression(this.width>590?"590px":this.width); max-height:590px; height:expression(this.height>590?"590px":th

DIV border边框显示不完全问题的解决方法_经验交流

第一次遇到这样的问题,就是定义div的边框有部分却显示不了.而在firefox里却是一切正常,该死的ie,太过分了. 代码也没有问题,查了好多资料,还百度了许多网站,在blueidea里也没有找到解决办法.后来在台湾的一个网站上发现了一个很几的解决办法: 如下: 左右两边的边框就是不显示,气不死你~~郁闷, css是: 复制代码 代码如下: #divproject {    margin-top: 5px;    border: 1px solid #0099CC;  }  后来按照那个网站的介

分页显示之超级提速版_经验交流

大家知道,asp本身提供分页功能,但是,如果数据量很大的时候,分页显示起来,每换一页都要等N长时间,那是人们最讨厌的事情.那为什么每换一页都要这么长时间呢?其实,事实上每换一个页面,后台就从数据库中检索一次数据,这样一来数据量大了,自然速度缓慢.这当中我们可以看出它做了很多次重复的工作.数据的检索只要一次就够了,因为数据没被操作过,无论检索几次结果都是一样的.我们的目标就是要把这当中的重复检索次数减少到最少,1次或者2次.方法就是:把检索好的数据保存起来(比如你可以在登录成功后就在后台检索你要的

标准布局应用:显示/隐藏侧边栏 [附详细注解]_经验交流

显示/隐藏 俺是个js初学者,献丑了.这段js演示其实很简单,俺在这里只是想跟js大大们说一句:js是行为,不要跟样式表打架.有些事还是该由css来做的,例如:display:none || display:block,简直泛滥成灾了!俺只会玩玩css,拿到js不会改,不敢改,唉.明明一个class就能甩给css做的事,js为啥要抢着做呢?搞得俺们这些会点css滴菜鸟们好是郁闷~难道玩css就一定要会js么?