觉唯移动web开发常见问题解决方案_觉唯设计
1、&meta& 元素
meta 标签位于 head 标签之间，是 HTML 语言的一个辅助性标签，合理的设置在移动端中起着非常重要的作用。下面列举几个常用的用法：
// 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览
&meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"&
// 禁止百度SiteApp转码声明
&meta http-equiv="Cache-Control" content="no-siteapp"&
// 禁止自动识别电话和邮箱；
&meta name="format-detection" content="telephone=no, email=no"&
// 指定iphone中safari顶端的状态条的样式(default：白色；black：黑色；black-translucent ：半透明)；
&meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"&
// 添加到 IOS 主屏后的标题
&meta name="apple-mobile-web-app-title" content="觉唯设计"&
// 隐藏地址栏，启用 WebApp 全屏模式
&meta name="apple-mobile-web-app-capable" content="yes"&
// 优先使用 IE 最新版本和 Chrome
&meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"&
// 注明作者
&meta name="author" content=""&
2、font-family 字体选择
body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-}
iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi（中文名称叫黑体-简）。设计时候一般用华文黑体来代替，两者差异微小。
3、使用 rem 替代 em 单位
rem（root element，html）是 CSS3 新增的一个相对单位，相对于根目录的 em 而不是相对于父元素，也就是说，它虽然是相对值，但是只是相对于根目录来说的（也就是 html），它不会随着其它元素的改变而改变。通过它既可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。从而可以有效的快速保持任何分辨率下保持视觉一致。
4、禁止选择
当你希望页面上的文字或者图片不被用户选择时候亦或者禁止长按保存图片时，可以使用这个方法来实现。是不是很方便的说，但注意的是不可滥用，否则会出现一些无法输入或者点击的情况。
-webkit-touch-callout:
/* 禁止长按链接与图片弹出菜单 */
html, body {
-webkit-user-select:
/* 禁止选中文本（如无文本选中需求，此为必选项） */
user-select:
5、html5重力感应事件
还记得满大街的摇一摇抽奖吗？大部分核心代码就是这个。
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
var speed = 30;//speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
var acceleration =event.accelerationIncludingG
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX) & speed || Math.abs(y-lastY) & speed || Math.abs(z-lastZ) & speed) {
alert('别摇那么大力嘛...');
// your code here
6、CSS3动效类型
常见的CSS3动画效果类型：
7、touch优化点击事件
移动端上touch事件有四个，其触发顺序为：
touchstart -& touchmove -&
touchend -& touchcancel
在移动端 click 会有 300ms 的延迟，所以体验十分差，建议封装的 tap 事件来代替 click 事件（其实 tap 是由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成）。
注：对于某些 android 系统 touch 的 bug:
比如手指在屏幕由上向下拖动页面时，理论上是会触发 一个 touchstart ，很多次 touchmove ，和最终的 touchend ，可是在android 4.0上，touchmove只被触发一次，触发时间和touchstart 差不多，而touchend直接没有被触发。这是一个非常严重的bug，在google Issue已有不少人提出 ,这个很蛋疼的bug是在模拟下拉刷新是遇到的尤其当touchmove的dom节点数量变多时比出现，当时解决办法就是用settimeout来稀释touchmove。
8、base64编码图片替换小图片
对于一些小图片icon之类的，可以将图片用base64编码，来减少网络请求。但是对于大图，就不要使用base64编码了，不然你的代码会变成无底洞，拉代码滚动条拉到你想哭。编码和解码也需要计算量，比较耗费CPU。
base64有以下几个优点：
减少了HTTP网络请求
避免某些文件跨域的问题
修改无需清缓冲，立即生效
9、开启硬件加速优化动画效果
如果你涉及到动画制作，是否经常发现在PC端效果非常不错，但是到了手机上就卡翔了。这个时候我们可以通过CSS开启硬件加速来改善动画效果，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速。CSS animations, transforms 以及 transitions 默认是不会自动开启GPU加速，而是需要某些CSS规则来触发，例如：transform: translate3d。开启硬件加速后可以解决页面闪白等问题，可以让渲染更流畅。
10、布局使用display弹性自适应
内容排版布局显示，尽量少使用float，建议使用display的box、flex等（多栏）自适应布局；优点表现在：
独立的高度控制与对齐
独立的元素顺序
指定元素之间的关系
灵活的尺寸和对齐方式
11、增加按钮:active反应效果
当用户在操作按钮的时候，如果按钮还是死死的，没有任何反应，这样子的体验是很差的，甚至是反人类的。在pc端我们都会习惯加上hover属性，来改变按钮状态；但移动端可不买这家伙的帐，在移动端没有鼠标一说，这个时候我们就可以让active上场了，带来的效果也是杠杠的。
12、设置CSS3(@media)横竖屏样式
//竖屏时使用的样式
@media all and (orientation:portrait) {
code here ...
//横屏时使用的样式
@media all and (orientation:landscape) {
code here ...
记住我的登录
您也可以使用第三方帐号登录
您也可以使用第三方帐号快捷注册移动端 h5开发相关内容总结：CSS篇 - WEB前端 - 伯乐在线
& 移动端 h5开发相关内容总结：CSS篇
1.移动端开发视窗口的添加
h5端开发下面这段话是必须配置的
meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&
meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&
其它相关配置内容如下：
width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。
2.媒体查询的改进
之前在做移动端开发的时候，为了适配多屏幕。使用的是rem 单位。这个时候就需要根据屏幕的尺寸来来动态的设置根节点html 的font-size 值。这样可以解决多屏幕适配的问题。
比如下面的 媒体查询代码
font-size: 62.5%;
@media (max-width: 414px) {
//iphone6+
font-size: 80.85%;
@media (max-width: 375px) {
font-size: 73.24%;
12345678910111213141516
html {&&&&//iphone5&&&&font-size: 62.5%;}@media (max-width: 414px) {&&&&html {&&&&&&&&//iphone6+&&&&&&&&font-size: 80.85%;&&&&}}@media (max-width: 375px) {&&&&html {&&&&&&&&//iphone6&&&&&&&&font-size: 73.24%;&&&&}}
这样做的结果，有两个很明显的缺点。
适配屏幕的尺寸不是连续的。
在自己的 css 文件中添加大段的这样查询代码。增加了 css 文件的体积。
后来参考淘宝移动端页面适配规则，使用 js 获取客户端的宽度，根据设计稿的原型动态的计算font-size 的值。
详细的内容请看这里
3.a标签内容语义化
大多数时候我们都会给一片区域加上点击跳转的功能。如下图：
很可能我们商品区域都是使用的div 标签。很容易我们会给最外层加上一个 a 标签。因为a 是行内元素，是没有宽和高的。不能够把容器撑开。
一种解决办法就是给a 标签设置block 属性。如下：
a{display:}
&div&&/div&
&style&&&&&a{display:block;}&/style&&&a&&&&&&div&&/div&&/a&
功能上已经没有问题。但是在语义化的层面上，上面的代码是不标准的。
最好的做法就是做如下的修改,这样不会使自己的 html 代码显的太突兀：
a{display:}
span{dispaly:}
&span&&/span&
&span&&/span&
&span&&/span&
12345678910
&style& a{display:block;} span{dispaly:block;}&/style&&&a&&&&&&span&&/span&&&&&&span&&/span&&&&&&span&&/span&&/a&
4.为自己的页面设置最大宽度和最小宽度
如果我们使用的是rem 单位，使用 js 动态计算font-size 值的话，我们可以无限适配最大和最小的终端屏幕。但是当用户的屏幕超过一定的尺寸以后还继续显示h5页面的话对用户会很不友好。
我们参看下京东和淘宝的h5 页面
我们看到了都是定义了页面的最大和最小宽度。这样在屏幕超过一定的尺寸以后可以更友好的展示（当然这不是必须的）。
我给自己的产品页面定义的最大的宽度和最小宽度分别是：
max-width:640
min-width:320
{&&&&max-width:640px;&&&&min-width:320px;}
5.去掉 a，input 在移动端浏览器中的默认样式
1.禁止 a 标签背景
在移动端使用 a标签做按钮的时候，点按会出现一个“暗色”的背景，去掉该背景的方法如下
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
a,button,input,optgroup,select,textarea {&&&&-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/}
2.禁止长按 a，img 标签长按出现菜单栏
使用 a标签的时候，移动端长按会出现一个 菜单栏，这个时候禁止呼出菜单栏的方法如下：
-webkit-touch-callout: /*禁止长按链接与图片弹出菜单*/
a, img {&&&&-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/}
3.流畅滚动
-webkit-overflow-scrolling:
body{&&&&-webkit-overflow-scrolling:touch;}
6.CSS 截断字符串
单行截断字符串,这里必须指定字符串的宽度
/*指定字符串的宽度*/
/* 当字符串超过规定长度，显示省略符*/
text-overflow:
white-space:
{&&&&/*指定字符串的宽度*/&&&&width:300px;&& &&&&overflow: hidden;&&&&&&/* 当字符串超过规定长度，显示省略符*/ &&&&text-overflow:ellipsis;&&&&&&white-space: nowrap;&& }
7.calc 相关问题
之前在做布局的时候使用calc 出现了很严重的线上 BUG。后来就深究了下这个属性的使用。
calc好用的地方就是，可以在任何单位之间进行换算。但是浏览器支持的不是很好。看一下 can i use 截图：
而且在使用的时候要加上厂商前缀，达到兼容性。不过现在不推荐使用，毕竟，浏览器支持有限。
示例代码：
#formbox {
/*加厂商前缀，操作符（+，-，*，/）两边要有空格）*/
-moz-calc(100% / 6);
-webkit-calc(100% / 6);
calc(100% / 6);
padding: 4
#formbox {&&width:&&130px;&&/*加厂商前缀，操作符（+，-，*，/）两边要有空格）*/&&&&&&&&&&&&&& &&width:&&-moz-calc(100% / 6);&& &&width:&&-webkit-calc(100% / 6);&& &&width:&&calc(100% / 6);&& &&border: 1px solid black;&&padding: 4px;}
研究过淘宝，天猫，京东的 h5端页面看到这个单位用的不多，主要还是兼容性的问题吧。
8.box-sizing 的使用
解决盒模型在不同浏览器中表现不一致的问题。但是仍然会有兼容性问题。看最下面的浏览器支持列表。
box-sizing 属性用来改变默认的 CSS 盒模型 对元素高宽的计算方式。这个属性用于模拟那些非正确支持标准盒模型的浏览器的表现。
它有三个属性值分别是：
content-box 默认值，标准盒模型。 width 与 height 只包括内容的宽和高， 不包括边框，内边距，外边距。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10} 那么在浏览器中的渲染的实际宽度将是370
padding-box width 与 height 包括内边距，不包括边框与外边距。
border-box width 与 height 包括内边距与边框，不包括外边距。这是IE 怪异模式（Quirks mode）使用的 盒模型 。注意：这个时候外边距和边框将会包括在盒子中。比如 .box {width: 350 border: 10} 浏览器渲染出的宽度将是350px.
浏览器支持：
9.水平垂直居中的问题
可以看之前写定位的一篇文章，末尾有讲到各种定位：
这里实现一个相对定位和绝对定位配合实现水平垂直居中的样式。看效果：
html 代码如下：
&div class="parent-div"&
&div class="child-div"&&/div&
&div class="parent-div"&&&&&&&&&&div class="child-div"&&/div& &/div&
css代码如下：
.parent-div{
width: 100
height: 100
background-color:
.child-div{
background-color:#000;
1234567891011121314151617
.parent-div{&&&&&&&&&&&&width: 100px;&&&&&&&&&&&&height: 100px;&&&&&&&&&&&&background-color:red;&&&&&&&&&&&&position:relative;&&&&&&&&}&&&&&&&&.child-div{&&&&&&&&&&&&width:50px;&&&&&&&&&&&&height:50px;&&&&&&&&&&&&background-color:#000;&&&&&&&&&&&&position: absolute;&&&&&&&&&&&&margin:auto;&&&&&&&&&&&&top:0;&&&&&&&&&&&&left:0;&&&&&&&&&&&&right:0;&&&&&&&&&&&&bottom:0;&&&&&&&&}
绝对定位在布局中可以很方边的解决很多问题，但是大多数时候都不去使用绝对定位，而是使用浮动等方法。而当需要 DOM 元素脱离当前文档流的时候才使用绝对定位。如： 弹层，悬浮层等。
10. css 中 line-height 的问题
line-height 一个很重要的用途就是让我们的文本可以在父级元素中垂直居中，但是在使用它的过程中也会遇到一些问题。
先来看一个实例，如下图：
代码也很简单，就是当我们在div 中定义的字体很大的情况下，我们看到字体和父级元素之间有一些空隙。那么这是为什么？
我们查一下 line-height 的定义，如下：
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。
所以在以上的情况我们要想使，我们的字体能够撑满我们的容器，就需要给父级容器添加 line-height属性且值为 100%
代码和效果如下：
那么为什么会出现上面的问题呢？
line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。
所以，可以得出下面的一个公式：
空白间距 = line-height – font-size
所以，当设置为line-height 的值为100%的时候，line-height的值就等于 font-size的尺寸，此时的空白间距为0。
11.使用 vertical-align 调整图标垂直居中
很多时候我们要把图标和文字配合使用，而且需要图标和文字都能够垂直居中。如下图所示：
如果要实现文字的垂直居中很容易，只需要使用line-height=父容器高度 。但是要想使图标能够垂直居中就比较麻烦。
正常情况下我们的文字或者说相邻的容器，都应该和文字保持在相同的底线上，如下图：
明显的可以看到我们的返回图标不是垂直居中的。那么应该怎么样使图标垂直居中呢？
首先，我们先来搞清楚几个线的关系（图片来源于网络，侵权请告知）：
这样我们就要用到 vertical-align 这个属性，最重要的一点是:
指定了行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式
baseline：将支持valign特性的对象的内容与父级元素基线对齐
sub：元素基线与父元素的下标基线对齐。
super：元素基线与父元素的上标基线对齐。
top： 元素及其后代的顶端与整行的顶端对齐。
text-top：元素顶端与父元素字体的顶端对齐。
middle：元素中线与父元素的基线对齐。
bottom：元素及其后代的底端与整行的底端对齐。
text-bottom：元素底端与父元素字体的底端对齐。
percentage：用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
length：用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）
看下边的一段 html ：
&div class="title-div"&
&img src="1_icon.png" alt="返回图标"&
&!-- &span &图标位置&/span& --&
&span&我就是标题&/span&
&div class="title-div"&&&&&&&&&&img src="1_icon.png" alt="返回图标"&&&&&&&&&&!-- &span &图标位置&/span& --&&&&&&&&&&span&我就是标题&/span&&/div&
最初的结果是这样子的
我们想实现如下图所示的结果，图标相对于右边的字体居中：
这个时候我们就要使用vertical-align属性和设置他的length属性，即设置我们的图标相对与文字基线的偏移量。
当我们加入属性的时候很容易使图标和文字都垂直居中。
vertical-align:15
{&&&&vertical-align:15px;}
这个时候就会是我们的图标和字体相对于父级元素居中。
12.flex 弹性盒模型的使用
flex 现在 pc 端支持的不好（主要是因为还有很多 IE8，9的用户存在。）大多情况下我们都是在移动端使用flex布局。但是就算是这样，也会有很多坑人的 bug出现。
谈谈一些基本的使用经验吧，什么时候使用 flex 。
1.什么时候使用 flex 属性
先来看一个产品模型如下图
我的左边商品和右边商品的宽度是一样的。当我看到这个模型的时候，第一件就是想就是使用 flex 让我们两列商品列表平分屏幕区域。这个时候就是用flex 来做。
父级元素如下定义
margin-bottom: .5
display: -webkit-
display: -ms-
display: -webkit-
-webkit-flex-flow:
-ms-flex-flow:
flex-flow:
1234567891011
{&& &&&&margin-bottom: .5rem;&&&&display: box;&&&&display: -webkit-box;&&&&display: -ms-flexbox;&&&&display: flex;&&&&display: -webkit-flex;&&&&-webkit-flex-flow: row;&&&&-ms-flex-flow: row;&&&&flex-flow: row;}
2.添加厂商前缀
使用 flex 的时候一定要记得加厂商前缀（目前使用方式都有三种写法：1，旧的2，过度的3，新的)。不然肯定会有兼容性问题。
display: -webkit-
display: -ms-
display: -webkit-
{&&&&display: -webkit-box;&&&&display: -ms-flexbox;&&&&display: flex;&&&&display: -webkit-flex; }
3.flex低版本浏览器的兼容
先看我的代码：
box-flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
width: 18.5
{&&&&box-flex: 1;&&&&-webkit-box-flex: 1;&&&&-webkit-flex: 1;&&&&-ms-flex: 1;&&&&flex: 1;&&&&width: 18.5rem;}
这里只是让左右两边平分屏幕的宽度。
之前使用 flex在安卓4.3的手机上遇到一个问题。正常的页面应该如下图所示，
但是在 安卓4.3的手机上却是如下的结果
后来研究了下天猫的页面（因为之前使用这个 flex 就是参考天猫来学习的），看到他们在定义flex值的时候 都会有这样的一个属性width=0;
而且当我给我的页面也加上这个属性的时候，页面的布局也变得正常了。我现在想不明白愿意是什么，只能当一个 hack 来使用。如果大家也遇到这个问题，请试一下添加这个属性。如果大家知道为什么这么用，请指教一下。
13.CSS3动画性能的问题
给大家推荐一个网站（）可以检测我们平时使用的 css 属性改变元素样式的时候，触发的是 cpu还是 gpu ，特别是在做动画的时候，如果使用 gpu 渲染图形，可以减少 cpu 的消耗，提高程序的性能。
比如我们做一个 slider 动画切换图片位置的时候，会使用margin-left的属性，通过网站查询该属性值得到如下的结果
由上可以知道使用margin-left 的时候会处罚页面的重绘和重排。
但是当我们使用css3新属性transform 来代替传统的 margin-left 来改变元素位置的时候对页面有什么影响呢？先来看下网站查询的结果：
由查询结果可以知道，使用transform 不会触发任何的重绘。而且会触发 gpu 来帮助页面的排版。即使用GPU操作渲染动画，减少cpu的消耗，提高性能。
css动画简单实例，css代码如下：
.lottery-animation {
-webkit-animation: lottery-red 2s;
animation: lottery-red 2s;
-webkit-animation-iteration-count:
animation-iteration-count:
@-webkit-keyframes lottery-red {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
@keyframes lottery-red {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
12345678910111213141516171819202122232425262728
.lottery-animation {&&&&-webkit-animation: lottery-red 2s;&&&&animation: lottery-red 2s;&&&&-webkit-animation-iteration-count: infinite;&&&&animation-iteration-count: infinite;}&@-webkit-keyframes lottery-red {&&&&from {&&&&&&&&-webkit-transform: rotateY(0deg);&&&&&&&&transform: rotateY(0deg);&&&&}&&&&to {&&&&&&&&-webkit-transform: rotateY(360deg);&&&&&&&&transform: rotateY(360deg);&&&&}}&@keyframes lottery-red {&&&&from {&&&&&&&&-webkit-transform: rotateY(0deg);&&&&&&&&transform: rotateY(0deg);&&&&}&&&&to {&&&&&&&&-webkit-transform: rotateY(360deg);&&&&&&&&transform: rotateY(360deg);&&&&}}
效果如下图：
这里我只是对图像标签添加了一个 class="lottery-animation"
我截取动态图片软件的问题，我的这个gif 截图动画有些卡顿，不流畅。在正常机器上是没有问题的（如果大家有mac下好用的 gif截图软件可以推荐给我，谢谢！）。
关于 css3 动画性能优化推荐阅读文章：
如果您觉得不错，请访问 github（） 地址给我一颗星。谢谢啦！
打赏支持我写出更多好文章，谢谢！
打赏支持我写出更多好文章，谢谢！
任选一种支付方式
关于作者：
可能感兴趣的话题
关于第9点中描述，浮动不也算脱离文档流吗？文章虽老，但价值仍在，只能感叹关于移动端的文章太少了！
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线移动端web网页的meta设置 - 简书
移动端web网页的meta设置
为了让手机网页有更好的体验，需要重置一些meta。
&meta charset='utf-8'&&!-- 声明文档使用的字符编码 --&
&meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/&&!-- 优先使用 IE 最新版本和 Chrome --&
&meta name="description" content="不超过150个字符"/&&!-- 页面描述 --&
&meta name="keywords" content=""/&&!-- 页面关键词 --&
&meta name="author" content="name, "/&&!-- 网页作者 --&
&meta name="robots" content="index,follow"/&&!-- 搜索引擎抓取 --&
&meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"&&!-- 为移动设备添加 viewport, `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz , 不过我倾向于加上`width=device-width`，毕竟iphone5渐渐会被淘汰--&
&meta name="renderer" content="webkit"&&!-- 启用360浏览器的极速模式(webkit) --&
&meta name="format-detection" content="telphone=no, email=no"/&&!-- 忽略页面中的数字识别为电话，忽略email识别--&
&link rel="shortcut icon" type="image/ico" href="/favicon.ico"/&&!-- 添加 favicon icon --&&!-- iOS 设备 begin --&
&meta name="apple-mobile-web-app-capable" content="yes"/&
&meta name="apple-touch-fullscreen" content="yes"/&&!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 --&
&meta name="apple-mobile-web-app-status-bar-style" content="black"/&&!-- 设置苹果工具栏颜色:默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）； --&
&meta name="apple-mobile-web-app-title" content="标题"&&!-- 添加到主屏后的标题（iOS 6 新增） --&
&meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"&&!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --&
&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 点击无高光 --&
&!-- iOS 图标 begin --&
&!--网站添加至ios桌面时的图标--&
&link rel="apple-touch-icon-precomposed" sizes="57x57" href="table_ico57.png"&&!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --&
&link rel="apple-touch-icon-precomposed" sizes="72x72" href="table_ico72.png"&
&link rel="apple-touch-icon-precomposed" sizes="114x114" href="table_ico114.png"&&!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --&
&link rel="apple-touch-icon-precomposed" sizes="144x144" href="table_ico144.png"&&!-- Retina iPad，144x144 像素，可以没有，但推荐有 --&&!-- iOS 图标 end --&
&!-- iOS 启动画面 begin --&
&link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/&&!-- iPad 竖屏 768 x 1004（标准分辨率） --&
&link rel="apple-touch-startup-image" sizes="" href="/Default-Portrait-.png"/&&!-- iPad 横屏 （标准分辨率） --&
&link rel="apple-touch-startup-image" sizes="" href="/splash-screen-.png"/&&!-- iPad 竖屏 （Retina） --&
&link rel="apple-touch-startup-image" sizes="" href="/splash-screen-.png"/&&!-- iPad 横屏 （Retina） --&
&link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/&&!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --&
&link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/&&!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --&
&link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/&&!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --&&!-- iOS 启动画面 end --&
&!-- iOS 设备 end --&
&meta name="msapplication-TileColor" content="#000"/&&!-- Windows 8 磁贴颜色 --&
&meta name="msapplication-TileImage" content="icon.png"/&&!-- Windows 8 磁贴图标 --&
&link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/&&!-- 添加 RSS 订阅 --&
&!-- sns 社交标签 begin --&
&!-- 参考微博API --&
&meta property="og:type" content="类型" /&
&meta property="og:url" content="URL地址" /&
&meta property="og:title" content="标题" /&
&meta property="og:image" content="图片" /&
&meta property="og:description" content="描述" /&
&!-- sns 社交标签 end --&
1.使用特殊链接：如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接
&a href="tel:"&打电话给我&/a&&a href="sms:"&发短信&/a&
或用于单元格：
&td onclick="location.href='tel:122'"&
2.自动大写与自动修正：要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项：
&input type="text" autocapitalize="off" autocorrect="off" /&
狼行千里吃肉，狗行千里吃屎；活鱼逆流而上，死鱼随波逐流。