1 3 7 - 1 4 4 1 - 9 7 9 7
首页 > 品牌伙伴 > 品牌伙伴详细内容

Web与App理论用户体验篇之若何针对多种屏幕尺寸计划公道的挪动利用

来源:网站建设 | 作者:网站建设 | 时间:2022-04-17 | 浏览:1260
字体大小:


身为一个挪动web网站的计划师,除非你只是针对某种特定的装备计划,不然你应当会经常遇到如许的成绩:若何清楚地了解网站运转装备的屏幕尺寸巨细?这个成绩一向搅扰着挪动装备上的计划师。

比方:


iPhone的高度是480个像素,宽320像素。


很多Nokia N系列装备的宽度为240像素,高度为320像素。


很多更新款的装备支撑宽度和高度倒置的视图。


旧款的Nokia(现在依然对照风行)装备屏幕的尺寸从176×208到352×416不等。


Blackberry屏幕的分辨率也是从160×160到324×352各类尺寸都有。



本文意在阐明若何针对雄厚的挪动装备和屏幕尺寸,公道地计划运用视图。起首提出两个小屏幕计划中的症结成绩——屏幕和像素巨细的多样性。


处置多样性


目下当今你能够会问本身“我的计划真的须要知足全部这些分歧的屏幕尺寸吗?”,或是“我是不是应当为每种分歧的装备专门计划一个版本?”这完整取决于你的项目的商业请求,有的计划能够只须要知足一种屏幕尺寸——或说是一种装备就充足了。但若是项目请求你的计划必需支撑大多数的支流装备,那末你就必需找到一种处置多种屏幕尺寸的有用方法了。


不必张皇,工作没有那末可骇。在计划挪动web时,你完整能够假定页面是能够高低转动的——就像桌面浏览器中的运用一样。如许就不必斟酌屏幕的高度成绩了,你能够将主要的精神会合在处置装备屏幕的宽度上了。荣幸的是,DeviceAtlas Explorer已供应了大批已有装备的屏幕宽度统计信息了。


正如图表所示,大多数的屏幕宽度主要会合在128,240和176像素这几种范例中——而残剩的会合范例:120,130,160,208和220像素——和最多的三种范例值也相差不大。还有一小部份的屏幕尺寸宽度为96,101,网站建设,320或是大于320像素。屏幕宽度低于128像素的装备只占了很小的比例,总共有469个装备。


还有一点,不到5%的装备宽度大于320个像素。但这一数字能够会在将来有所提拔,现在已能够看到,小屏幕(128,176等)装备正逐步被大屏幕(240+)装备所替代。下面的图表给出了相关的阐明。


屏幕的分辨率切实其实很重要,但还有一点异样也必需斟酌——屏幕的物理尺寸。


‘像素成绩’


这些年来,计划师主要是针对大型的桌面装备计划视图。虽然表现器的物理尺寸能够不尽雷同,但屏幕的尺寸根基都为1024×768像素;罕见的像素密度为85 ppi(pixels-per-inch)。然则近来,表现的视图最先发生了一些变更:


Asus Eee PC 900上彀本的分辨率为1024×600像素,像素密度约为133ppi。


Apple iPhone的分辨率为320×480像素,个中像素密度为160ppi。


Nokia的E60屏幕的分辨率为416×352,而像素密度是240ppi。


为了支撑多种装备,像素密度的分歧将带来新的成绩;像素的巨细也将影响全部计划的结果。


下图表现了在像素密度为72,144和240ppi的装备上,100×100像素的图像的表现结果。随着图片愈来愈小,图像的外形和一些细节都有所变形。


荣幸的是,寻求高像素密度的风潮似乎已曩昔了,现在跨越200 ppi的装备还其实不多见了。这意味着,你其实不是真的须要支撑上图中列出的全部的像素密度。然则,在计划的时刻,你须要记住,不能想固然地以为全部的装备的像素都是相称的。须要做到以下几点:


肯定你须要支撑的像素密度的范畴。


在真实装备上检测你的计划,以防某些极端的情形被你疏忽了。


运用绝对单元计划和界说结构元素,比方ems或是百分百。这将供应一个更真实的结构元素尺寸和地位信息。


因为制造商想要提拔操作体系的灵活性,因而‘像素成绩’将遭到愈来愈多的存眷。事实上,Google的Android体系已完成了一个“>potentially interesting solution”方案来处理像素的成绩。Android操作体系采取了一个笼统的‘dp’(自力像素密度)单元,它是基于160 ppi屏幕尺寸的。如许一来,计划职员就能运用绝对巨细界说字体以及其他界面元素了,从而依据装备的真是尺寸自动调治视图了。



免责声明:本文内容由互联网用户自发贡献自行上传,本网站也不承担相关的法律责任。如果您发现本文章中有涉嫌抄袭的内容,请发送邮件至:sales@sznetsoft.com或者至电给本网站进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权的内容。
相关信息
  • QQ好友
  • QQ空间
  • 腾讯微博
  • 新浪微博
  • 人人网
  • 豆瓣网
  • Facebook
  • Twitter
  • linkedin
  • 谷歌Buzz


线

网软通在线


在线客服: 点击这里给我发消息                        

1231.jpg

留言内容