移动端开发必备知识( 转载 )_html/css_WEB-ITnose

一：基本概念

( 1 )  CSS pixels 与 device pixels

CSS pixels：

device pixels：

 

( 2 )  PPI/DPI

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

 

 

PPI的计算：

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

 

( 3 )PPI密度决定比例

120-160：低密度手机

160-240：中密度

240-320：高密度

320以上：超高密度( retina )

关键问题来了：

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

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

 

( 4 ) 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交流