自适应布局需要注意的总结

最近给自己写的www.web1234.org 导航网站，搞一个手机端的自适应，对于没有接触过太多的人来说有点复杂，所以只能求救万能的百度、bing、google，这篇文章就记录一些自适应布局需要注意的点，也为了以后能复习一下。

---

一、

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

1.name=”viewport” //设置视口（网页可绘制的区域）

2.width=device-width //应用程序的宽度和屏幕的宽度是一样的

3.height=device-height //应用程序的高度和屏幕的高是一样的

4.initial-scale=1.0 //应用程序启动时候的缩放尺度（1.0表示不缩放）

5.minimum-scale=1.0 //用户可以缩放到的最小尺度（1.0表示不缩放）

6.maximum-scale=1.0 //用户可以放大到的最大尺度（1.0表示不缩放）

7.user-scalable=no //用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）

二、

<meta name="viewport" content="target-densitydpi=device-dpi, width=480px, user-scalable=no">

1.target-densitydpi=device-dpi //指定屏幕像素密度DPI,device-dpi 为设备原本的DPI值,不会有任何缩放.( dpi是单位,一般指每英寸的像素)

三、

<meta name="apple-mobile-web-app-capable" content="yes">

//说明：网站开启对web app程序的支持

1.apple-mobile-web-app-capable //

2.content=”yes” //是否开启（开启）

四、@media screen and (max-width | min-width) {}