最近才开始接触开发移动版网页碰到许多问题,尤为是页面的大小缩放问题。看了一些别的移动版网站的源代码发如今head里面多了一个meta标签,代码以下:html
1
|
<
meta
name
=
"viewport"
content
=
"target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.5, user-scalable=yes"
>
|
查找了一下相关资料才算是明白了上面那行代码的意思:浏览器
target-densitydpi=device-dpi :在作手机版的页面时,若是使用了此属性那么页面中的内容会很小,好像分辨率越大的手机屏幕显示的效果越小,若是不用这个属性那么手机浏览器会自动放大到必定大小(这个应该是手机默认的)便于阅读效果。听说平板电脑用这个属性比较好。架构
width=device-width :设置了这个属性后页面的宽度就不会超过屏幕的宽度,即页面的宽度等于屏幕的宽度。ide
initial-scale=1.0 :页面初始放大或缩小的比例,1.0则表示没有放大或缩小。网站
minimum-scale=1.0 :页面缩小的最小的比例。1.0则表示页面缩小的比例最小为1。0倍,即原始的大小。spa
maximum-scale=1.5 :页面放大最大的比例。1.5则表示页面放大的比例最大为1.5倍。scala
user-scalable=yes :设置页面是否能够放大缩小。yes表示能够,no则表示不能够。code
刚刚接触移动版网页的开发,记录一下。htm
http://www.xiaoboy.com/Plugins/Sayslide2/ci