pc端网页自适应显示在移动端

当我们将一个pc端的网页放到移动端的时候，移动端浏览器会将pc端的网页按照一定的比例完整的显示出来，这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排版（ios默认的是980px，Android4.0以上为980px），然后通过比例缩放看到整个页面的全貌。 

但是,使用默认的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">

meta标签中参数的设置和含义如下：

• width=device-width：表示布局viewport的值是设备的宽度（也可以是特定的viewport值）
• initial-scale=1.0： 设置页面的初始缩放比例
• minimun-scale=1.0： 设置页面的最小缩放比例
• maximum-scale=1.0：设置页面的最大缩放比例
• user-scalable=no： 设置用户是否可以缩放操作

通过以上meta标签的设置，就可以将一个pc端的网页自适应的显示在移动端了，而以上的参数设置也是我们移动端开发的最常用设置。