屏幕宽度自适应
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
width viewport 宽度(数值/device-width) height viewport 高度(数值/device-height) initial-scale 初始缩放比例 maximum-scale 最大缩放比例 minimum-scale 最小缩放比例 user-scalable 是否允许用户缩放(yes/no)
取消自动识别手机号、邮箱
<meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection" />
开启电话功能
<a href="tel:123456">123456</a>
开启短信功能：
<a href="sms:123456">123456</a>
开启邮箱功能：
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
手机浏览器中不让用户看见那个输入url的控件条：
setTimeout(scrollTo,0,0,0);
这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。
关闭Input键盘默认首字母大写：
autocapitalize=”off”
favicon icon
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
优先使用最新版本 IE 和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!– 设置页面不缓存 –>
<meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0">
<!– 启用360浏览器的极速模式(webkit) –>
<meta name="renderer" content="webkit">
-
IOS
IOS页面顶部状态栏隐藏和显示，只有当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）
//设置全屏 <meta name="apple-mobile-web-app-capable" content="yes" /> //设置状态栏背景色 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
apple-mobile-web-app-status-bar-style：content 参数： default ：状态栏背景是白色。 black ：状态栏背景是黑色。 black-translucent ：状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
//判断是不是手机端 if (window.navigator.userAgent.indexOf('iPhone') != -1) { //判断是不是从主屏幕启动 if (window.navigator.standalone == true) { // 初始化 app }else{ // 弹出提示框将app添加到Home Screen } }else{ document.location.href = 'please-open-from-an-iphone.html'; }
ios中保存到桌面的图标
<link rel="apple-touch-icon" href="custom_icon.png">
添加到桌面的标题
<meta name="apple-mobile-web-app-title" content="标题">
去掉输入框的内阴影
-webkit-appearance: none;
-
其它
<meta name="robots" content="index,follow"/> <!-- 搜索引擎抓取 --> <meta http-equiv="Cache-Control" content="no-siteapp"/> <!-- 不让百度转码 --> <meta name="HandheldFriendly" content="true"> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="MobileOptimized" content="320"> <!-- 微软的老式浏览器 --> <meta name="screen-orientation" content="portrait"> <!-- uc强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="full-screen" content="yes"> <!-- UC强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- QQ强制全屏 --> <meta name="browsermode" content="application"> <!-- UC应用模式 --> <meta name="x5-page-mode" content="app"> <!-- QQ应用模式 --> <meta name="msapplication-tap-highlight" content="no"> <!-- windows phone 点击无高光 -->