wap网页自适应宽度

Html head 标签当中加入viewport标签

<metaname="viewport"content="width=100%; initial-scale=1.0; maximum-scale=1.0;user-scalable=0;" />

关键属性:viewport
什么是viewport
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中,这样会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的不同部分。手机浏览器也基本支持。
Viewport属性介绍

width - viewport的宽度

initial-scale - 初始的缩放比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

         另外body内容以table方式布局,可以保证不同分辨率自适应后的美观。

猜你喜欢

转载自labuladuo.iteye.com/blog/1814626