H5手机自适应

自适应meta头部代码:

     <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=750px, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">


解释:

1、设置meta属性

  • content属性值 :

(1)width:可视区域的宽度,值可为数字或关键词device-width;

(2)height:同width;

(3)intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放;

(4)maximum-scale=1.0, minimum-scale=1.0:可视区域的缩放级别,maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上;

(5)user-scalable:是否可对页面进行缩放,no 禁止缩放。

2、苹果为了提高Safari中网站的辅助功能,屏蔽了Meta下的user-scalable=no功能。所以在iOS10下面,就算加上user-scalable=no,Safari浏览器也能支持手动缩放。所以只能用js加监听事件来阻止手动缩放。


  • width=device-width :表示宽度是设备屏幕的宽度

  • initial-scale=1.0 :表示初始的缩放比例

  • minimum-scale=0.5 :表示最小的缩放比例

  • maximum-scale=2.0 :表示最大的缩放比例

  • user-scalable=yes :表示用户是否可以调整缩放比例





展开阅读全文

没有更多推荐了,返回首页