将pc端的网页自适应显示在移动端的方法
当我们将一个pc端的网页放到移动端的时候,移动端浏览器会将pc端的网页按照一定的比例完整的显示出来,这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排版(ios默认的是980px,Android4.0以上为980px),然后通过比例缩放看到整个页面的全貌。
但是,使用默认的viewport布局会有以下缺点:
所以,我们可以通过meta标签改变viewport得到移动端网页定制化自适应的一个效果。
但是,使用默认的viewport布局会有以下缺点:
- 宽度不可控制,不同系统不同设备的默认值可能不同
- 页面缩小版显示,交互不友好
- 链接不可点
- 有缩放,缩放后又有滚动
所以,我们可以通过meta标签改变viewport得到移动端网页定制化自适应的一个效果。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">