web移动开发资源整理之meta基础
2016-11-01 本文已影响37人
器宇轩昂1988
本系列文章大都来自于网上大神的解决方案，在这里罗列出来，只为开发时方便查询，创作权归原作者所有。
简单做下总结，首先了解下移动web带来的问题
- 设备更新换代快——低端机遗留下问题、高端机带来新挑战
- 浏览器厂商不统一——兼容问题多
- 网络更复杂——弱网络，页面打开慢
- 低端机性能差——页面操作卡顿
- HTML5新技术多——学习成本不低
- 未知问题——坑多
面对这些问题，一开始我们只能在未知中试错，知道错误的方案才能更容易寻找正确的解决问题思路，2年多来，可看到移动web在业界不断趋向于成熟，各种框架和解决方案不断的涌现让移动端开发不再是个噩梦。
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
去掉winphone系统a、input标签被点击时产生的半透明灰色背景
<meta name="msapplication-tap-highlight" content="no">
当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以后，safari上已看不到效果 -->
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->
viewport模板——通用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection"><meta name="msapplication-tap-highlight" content="no">
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>
<body>这里开始内容</body>
</html>
viewport模板 - target-densitydpi=device-dpi，android 2.3.5以下版本不支持
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">
<!-- width取值与页面定义的宽度一致 -->
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection"><meta name="msapplication-tap-highlight" content="no">
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>
<body>这里开始内容</body>
</html>
