H5项目常见问题-Meta基础知识

1. //一、HTML页面结构 
2. <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 
3. // width    设置viewport宽度，为一个正整数，或字符串‘device-width’ 
4. // height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 
5. // initial-scale    默认缩放比例，为一个数字，可以带小数 
6. // minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数 
7. // maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数 
8. // user-scalable    是否允许手动缩放 
9.   
10. //二、JS动态判断 
11. var phoneWidth =  parseInt(window.screen.width); 
12. var phoneScale = phoneWidth/640; 
13. var ua = navigator.userAgent; 
14. if (/Android (\d+\.\d+)/.test(ua)){ 
15.     var version = parseFloat(RegExp.$1); 
16.     if(version>2.3){ 
17.         document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">'); 
18.     }else{ 
19.         document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); 
20.     } 
21. } else { 
22.     document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); 
23. } 

空白页基本meta标签

1. <!-- 设置缩放 --> 
2. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> 
3. <!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） --> 
4. <meta name="apple-mobile-web-app-capable" content="yes" /> 
5. <!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） --> 
6. <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
7. <!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 --> 
8. <meta name="format-detection"content="telephone=no, email=no" /> 

其他meta标签
 

1. <!-- 启用360浏览器的极速模式(webkit) --> 
2. <meta name="renderer" content="webkit"> 
3. <!-- 避免IE使用兼容模式 --> 
4. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
5. <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> 
6. <meta name="HandheldFriendly" content="true"> 
7. <!-- 微软的老式浏览器 --> 
8. <meta name="MobileOptimized" content="320"> 
9. <!-- uc强制竖屏 --> 
10. <meta name="screen-orientation" content="portrait"> 
11. <!-- QQ强制竖屏 --> 
12. <meta name="x5-orientation" content="portrait"> 
13. <!-- UC强制全屏 --> 
14. <meta name="full-screen" content="yes"> 
15. <!-- QQ强制全屏 --> 
16. <meta name="x5-fullscreen" content="true"> 
17. <!-- UC应用模式 --> 
18. <meta name="browsermode" content="application"> 
19. <!-- QQ应用模式 --> 
20. <meta name="x5-page-mode" content="app"> 
21. <!-- windows phone 点击无高光 --> 
22. <meta name="msapplication-tap-highlight" content="no">