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

最近给自己写的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) {}