最近做iOS上的网页开发，从解决样式bug到发现需要iOS的部分彩蛋功能，果断记录之。
首先，先来说一下iOS系统上的Button显示问题，如以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Demo</title>
<style>
input{
width:300px;
height:100px;
background: red;
margin:20px;
display:block;
border:0;
}
</style>
</head>
<body>
<input type="button" value="Button">
<input type="submit" value="submit">
</body>
</html>
正常在PC端显示效果如下：
在Android中，通常也不会出现问题，但是在iOS中，显示效果如下：
iOS的Safari对CSS的按钮有默认样式，默认有border-radius:50%和阴影渐变，input[type=“text”]甚至还会有一些阴影和圆角，去除默认样式需要在CSS中加入以下代码：
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
除此之外，部分手机（iOS和部分Android机型）会识别一长串数字为手机号码，比如以下代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Demo</title>
</head>
<body>
1111111111
</body>
</html>
代码本身只有一串1显示，在手机浏览器中，会自动加上链接，点击显示为：
iosapp3
遇到这种情况，需要在
中加入以下meta标签，忽略识别数字为电话号码：<meta name="format-detection" content="telephone=no" />
另外还有一些彩蛋技巧，对于Webapp，比如，将网页添加到主屏幕，默认情况下，iOS是自动截取一张网页的缩略图，作为icon，实际上，这个icon是可以自己设定好的，添加以下代码
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/114.png?imageView2/2/w/1280">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/72.png?imageView2/2/w/1280">
<link rel="apple-touch-icon-precomposed" href="/images/57.png?imageView2/2/w/1280">
效果：
此时，相当于在主屏幕上，加了一个快捷方式，点开后直接打开safari浏览器，显示这个网页。
图标可以搞定以后，为了进一步让网页更接近原生app，下面这句meta，可以去除safari中的工具栏和菜单栏，只显示网页（Webapp化）：
<meta name="apple-mobile-web-app-capable" content="yes" />
如以下网页代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Demo</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
body{background: #3492e9;}
#title{font-size:24px;color:#fff;text-align:center;margin-top:50px;}
</style>
</head>
<body>
<div id="title">Hello World</div>
</body>
</html>
效果如下：
如上图，左边的图片可以看出，从主屏幕中打开的网页，已经去除了工具栏和菜单栏，只显示最顶部的时间状态栏，右边的图片可以看出，在多任务列表(切换app)中，从主屏幕打开的网页，被当做一个独立app一样，可以切换，显示icon和标题，而不是Safari浏览器。
最后，状态栏黑色的底色略丑啊，当然也是可以改的：
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
其中content值，可以定义为：default->白色，black->黑色，black-translucent->透明，分别如下：
当然从图上也可以看出，若值为black-translucent，网页将会上移，从最顶部显示网页，占据一定空间。
