你的位置:首页 > 网页设计

[网页设计]移动端开发必备知识( 转载 )


一:基本概念

( 1 )  CSS pixels 与 device pixels

CSS pixels:

device pixels:

 

( 2 )  PPI/DPI

PPI/DPI : 每英寸所拥有的像素数目,数值越高,即代表显示屏能够以越高的密度显示图像。

iPhone手机PPI

 

 

PPI的计算:

  首先计算出手机屏幕的对角线等效像素,然后除以对角线( 我们平常所说的手机屏幕尺寸说的是手机屏幕对角线的长度 )

 

( 3 )PPI密度决定比例

120-160:低密度手机

160-240:中密度

240-320:高密度

320以上:超高密度( retina )

关键问题来了:

  1个320px的页面放在4和4s中显示,你会发现,竟然是满宽的。

  原因:页面被默认放大2倍,也就是640px,而4和4s的宽,正式640px

 

( 4 ) viewport的使用

 <meta name="viewport"

content="

height=[ pixel_value | device-height ],

width=[ pixel_value | width-height ],

initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value ,

user-scalable =[yes | no] ,

target- densitydpi = [ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] " />

在这些属性里面,我们重点关注target-densitydpi,这个属性可以改变设备的默认缩放。

medium-dpi是target的默认值,如果我们显示定义target-densitydpi=device,那么设备就会按照真实的dpi来渲染页面。打个比方说,一张320*480的图片,放在iphone4里面,默认是占满屏的,但如果定义了target-densitydpi=device-dpi,那么图片只占屏幕的四分之一( 二分之一的平方 ),因为iphone4的分辨率为640*960。

 

二:解决方案

( 1 ) 简单粗暴

如果我们按照320px宽的设计稿去制作页面,并且不做任何设置,页面会默认自动缩放跟手机屏幕相等的宽度( 这是由于medium-dpi是target-densitydpi的默认值,和不同密度对应不同缩放比例所决定的,这一切都是移动设备自动完成的 )。所以这种解决方案,简单,粗暴,有效。但有一个致命的缺点,对于高密码和超高密码的手机设备,页面( 特别是图片 )会失真,而且密度越多,失真越厉害。

( 2 ) 极致完美

在这种方案中,我们采用

target-densitydpi = device-dpi,这样一来,手机设备就会按照真实的像素树木来渲染,用专业的话来说,就是 1 CSS pixel = 1 device pixel。比如对于 640 * 960的iphone,我们就可以做出640*960的页面,在iphone上显示也不会有滚动条。当然,对于其他设备,也需制作不同尺寸的页面,所有这种方案往往是用媒体查询来做成响应式的页面。这种方案可以在特定的分辨率下完美呈现,但是随着要兼容的不同分辨率越多,成本就越高,因为需要为每一种分辨率写单独的代码。

 1 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" / > 2 #header{ 3 background:url(medium-density-image.png); 4 } 5 @media screen and (-webkit-device-pixed-ratio:1.5){ 6 /* CSS for high-density screens */ 7 #header { background:url (high-density-image.png);} 8 } 9 @media screen and (- webkit -device-pixel-ratio:0.75) {10 /* CSS for low-density screens */11 #header { background:url (low-density-image.png);}12 }

( 3 ) 合理折中

针对安卓设备绝大多数是高密度,部分是中密度的特点,我们可以采用一个这种的方案:我们对480px宽的设计稿进行还原,但是页面却做成320px宽( 使用background-size来对图片进行缩小 ),然后,让页面自动按照比例缩放。这样一来,低密度的手机有滚动条(  这种手机基本上已经没人在用了 ),中密度的手机会浪费一点点流量,高密度的手机完美呈现,超高密度的手机轻微失真( 超高密度的安卓手机很少 )。这种方案的有点非常明显:只需要一套设计稿,一套代码( 这里只是讨论安卓手机的情况 )

 

这篇文章我看了一遍,觉得对于理解一些基本概念非常有帮助,所以拿过来以后,以后说不定给别人讲解的时候还能用的到,这篇博客下面还有关于开发调试的内容,没有列出来,先给出链接:http://blog.jobbole.com/31023/

由于没有前端开发经验,而且第一个公司是一个移动端项目very very多的一个公司,基本上都是,以后类似的东西肯定大大的多。欢迎不幸来到我博客的朋友和我交流,你也看到了,这里基本没什么有价值的东西,以后肯定会有的,欢迎加我球球:11580563交流