1. 标题前的小图标
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
注：W3C官网的写法：
<link rel="icon" type="image/png" sizes="16x16" href="images/w3_16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/ui2019/w3_32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/ui2019/logo-48-red.png">
<link rel="icon" type="image/png" sizes="96x96" href="/ui2019/logo-96-red.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/ui2017/logo-180.png">
（经验证：在本地文件打开的时候IE是无法显示的，但是放到服务器上都能正常显示；而其他浏览器均能正常显示。至于为什么要写这么多个我目前还没搞明白，希望有哪位路过者看到帮忙解答下）
2. meta标签
- 2.1
IE=edge: 让IE的文档模式是最新的
chrome=1: Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果电脑中装了这个chrome插件，就可以让电脑里面的IE不管是那个版本都可以使用webkit引擎及V8引擎进行排版及运算
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
- 2.2 浏览器中页面将以原始大小显示，并不允许缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- 2.3 禁止手机自动将网页中的电话号码显示为拨号的超链接
<meta name="format-detection" content="telephone=no">
- 2.4 网站开启对web app程序的支持
<meta name="apple-mobile-web-app-capable" content="yes" />
- 2.5 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
- 2.6 不识别邮箱
<meta content="email=no" name="format-detection" />
- 2.7 删除默认的苹果工具栏和菜单栏
<meta name="apple-touch-fullscreen" content="yes">
- 2.8 设置保存到主屏幕时的图标
苹果设备的safari有一项功能，将网页保存到主屏幕
<link href="//gw.alicdn.com/tps/i2/TB1nmqyFFXXXXcQbFXXE5jB3XXX-114-114.png" rel="apple-touch-icon-precomposed">
- 2.9
<meta name="data-spm" content="a215s">
此项meta与移动端无关，是淘宝xTao为外部合作伙伴提供的一套跟踪引导成交效果数据的解决方案。简单来说，就是类似cnzz的流量分析系统。 详细请参考淘宝开放平台
- 2.10 淘宝自定义meta
<meta content="fullscreen=yes,preventMove=no" name="ML-Config">
3. 根据显示屏幕的宽高和手机的横屏或者竖屏来显示不同的样式
页面宽度小于900px时页面加载hp.css
<link rel="stylesheet" media="screen and (max-width:900px)" href="styles/hp.css" />
手机横屏的时候页面加载hp.css
<link rel="stylesheet" media="screen and (orientation:landscape)" href="styles/hp.css" />
orientation:landscape （除portrait值情况外，都是landscape）手机横屏 orientation:portrait （指定输出设备中的页面可见区域高度大于或等于宽度）手机竖屏
4. web app中icon和启动页（待验证）
这个link就是设置web app的放置主屏幕上icon文件路径
<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"
使用：
该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
图片尺寸可以设定为5757（px）或者Retina可以定为114114（px），ipad尺寸为72*72（px）。
这个link就是设置启动时候的界面（图片五），放置的路劲和上面类似。
<link rel="apple-touch-startup-image" href="milanoo_startup.png" />
使用： 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。 官方规定启动界面的尺寸必须为 320*640（px），原本以为Retina屏幕可以支持双倍，但是不支持，图片显示不出来。
5. input新增属性
<input type="text" class="input-search" placeholder="请输入搜索内容" v-model.trim="searchKey" @input="searchEvent" ref="searchInput" autocomplete="off" autocapitalize="off" autocorrect="off" />
input的三个属性是H5新增的属性:
autocomplete
默认为on，其含义代表是否让浏览器自动记录自谦输入的值。
很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到。可以在input中加入autocomplete = “off”来关闭记录，系统需要保密的情况下可以使用此参数。
autocapitalize
自动大小写
autocorrect
纠错
