手机网页设计尺寸规范上的网页尺寸是多少

来源：蜘蛛抓取(WebSpider) 时间：2016-12-09 10:52 标签： 手机网页图片尺寸
手机app设计容易识别的文字尺寸，行距是多少？ - 文章 - 伯乐在线
& 手机app设计容易识别的文字尺寸，行距是多少？
你好！我是设计师小林。最近在智能手机上，app设计和有功能性的UI设计的需求增多了。用Photoshop做完宽640px的设计图后，再用真机确认。用多少号的文字每回都很迷茫。
“不觉得文字有点小么？” 、“标题和文本看起来没有区别吧？”等等…
这些问题常见吧，因此对智能手机系统默认的应用和有名的手机应用的文字尺寸进行调查。
1.用iPhone4s(对不起有点老)截屏。
2.Photoshop上用文本复写。（这时候记录文字设定的数值。）
Google Chrome
以上就是调查结果。
与自己所想的相比，果然标题整体稍大。
文本大体在24~28px,标题是26~34px。
另外，说句多余的话，在列表上的设计上下留30px的很多。
很多左右两边留白是30px，有信息的部分左右是20px。
根据APP和网站的目的等，调整元素的前后关系和整体的氛围，统一这些文字尺寸不是很好的么？难道不能成为一个指标吗？
话虽如此自从iPhone4S的IOS升级之后总觉得是落伍了…为了更好的调整，打算更换机种。那么，再见！
译者观点：
文章中的文字尺寸适用于iPhone5s以下的版本。大屏是否适用？有兴趣的酷友可以运用以上的验证方法自行调查iPhone6等的尺寸。
可能感兴趣的话题
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2016 伯乐在线手机屏幕尺寸测试——手机的实际显示页面的宽度
作者：yourber
字体：[ ] 类型：转载 时间：
本文主要通过测试，得出手机端网页实际显示的宽度，给开发人员在做手机端开发的时候做一些参考，希望能帮到大家。
手机站开发遇到一些问题，设计页面使用多大的尺寸？为此做了一些研究，除IPhone特殊一些外，目前市面上的安卓系统的实际显示页面的宽度，都是360px。
IPhone 6 Plus
Android(大多数)
前两年，安卓的分辨率多数还是240px 或 320px，现在是360px，为了向下兼容，向上也兼容，最终将 360px 定为设计的尺寸，后期可以使用CSS3 Media Queries即媒体查询特性做进一步的兼容，兼容其他设备，以及做一些设备的横屏的兼容。
附：屏幕尺寸测试的JS代码，如下
&!DOCTYPE html&
&title&屏幕尺寸测试&/title&
&meta http-equiv="Content-type" content="text/ 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"&
&body style="padding:0margin:0" scroll="no"&
&script language="javascript"&
var s = "";
s += "网页可见区域宽："+ document.body.clientW
s += "&br&网页可见区域高："+ document.body.clientH
s += "&br&网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)";
s += "&br&网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "&br&网页正文全文宽："+ document.body.scrollW
s += "&br&网页正文全文高："+ document.body.scrollH
s += "&br&网页被卷去的高："+ document.body.scrollT
s += "&br&网页被卷去的左："+ document.body.scrollL
s += "&br&网页正文部分上："+ window.screenT
s += "&br&网页正文部分左："+ window.screenL
s += "&br&屏幕分辨率的高："+ window.screen.
s += "&br&屏幕分辨率的宽："+ window.screen.
s += "&br&屏幕可用工作区高度："+ window.screen.availH
s += "&br&屏幕可用工作区宽度："+ window.screen.availW
s += "&br&你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += "&br&你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
document.write(s);
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具君，已阅读到文档的结尾了呢~~
手机网站设计尺寸及界面布局
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
手机网站设计尺寸及界面布局
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口2015年2月 总版技术专家分月排行榜第二
2015年2月 Web 开发大版内专家分月排行榜第一2015年1月 Web 开发大版内专家分月排行榜第一2014年12月 Web 开发大版内专家分月排行榜第一2014年11月 Web 开发大版内专家分月排行榜第一2014年10月 Web 开发大版内专家分月排行榜第一
2015年2月 总版技术专家分月排行榜第二
2015年2月 Web 开发大版内专家分月排行榜第一2015年1月 Web 开发大版内专家分月排行榜第一2014年12月 Web 开发大版内专家分月排行榜第一2014年11月 Web 开发大版内专家分月排行榜第一2014年10月 Web 开发大版内专家分月排行榜第一
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。

我要回帖

更多关于 手机网页图片尺寸 的文章

 

随机推荐