身为一个挪动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屏幕尺寸的。如许一来,计划职员就能运用绝对巨细界说字体以及其他界面元素了,从而依据装备的真是尺寸自动调治视图了。