一. 允许网页宽度自动调整: “自适应网页设计”到底是怎么做到的?
其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比 例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 对于viewport属性,我是真正在接触移动web开发是才遇到的,一把的ps布局都是固定的960px,1000px这种。
下面三篇文章是对viewport属性详细的解释: Viewport(视区概念)——pc端的理解 Viewport(视区概念)——移动端的应用 viewport ——视区概念(转) 对于老式IE6,7,8浏览器需要js处理,由于主要平台是ios和安卓,所有可以暂时不考虑
在网页的
中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。其中:
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例
如果是想要一打开网页,则自动以原始比例显示,并且不允许用户修改的话,则是:
这样子写后,就可以把一些页头横幅等的图片的宽度都设置成st