Webapp - 移动端网页iOS的开发技巧

2016-05-06 17:24发布于代码

最近做iOS上的网页开发，从解决样式bug到发现需要iOS的部分彩蛋功能，果断记录之。

首先，先来说一下iOS系统上的Button显示问题，如以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<!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中加入以下代码：

1
2
3input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}

除此之外，部分手机（iOS和部分Android机型）会识别一长串数字为手机号码，比如以下代码：

1
2
3
4
5
6
7
8
9
10<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Demo


1111111111

代码本身只有一串1显示，在手机浏览器中，会自动加上链接，点击显示为：

iosapp3

遇到这种情况，需要在中加入以下meta标签，忽略识别数字为电话号码：

1<meta name="format-detection" content="telephone=no" />

另外还有一些彩蛋技巧，对于Webapp，比如，将网页添加到主屏幕，默认情况下，iOS是自动截取一张网页的缩略图，作为icon，实际上，这个icon是可以自己设定好的，添加以下代码

1
2
3<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/72.png">
<link rel="apple-touch-icon-precomposed" href="/images/57.png">

效果：

此时，相当于在主屏幕上，加了一个快捷方式，点开后直接打开safari浏览器，显示这个网页。

图标可以搞定以后，为了进一步让网页更接近原生app，下面这句meta，可以去除safari中的工具栏和菜单栏，只显示网页（Webapp化）：

1<meta name="apple-mobile-web-app-capable" content="yes" />

如以下网页代码：

效果如下：

如上图，左边的图片可以看出，从主屏幕中打开的网页，已经去除了工具栏和菜单栏，只显示最顶部的时间状态栏，右边的图片可以看出，在多任务列表(切换app)中，从主屏幕打开的网页，被当做一个独立app一样，可以切换，显示icon和标题，而不是Safari浏览器。

最后，状态栏黑色的底色略丑啊，当然也是可以改的：

1<meta name="apple-mobile-web-app-status-bar-style" content="black" />

其中content值，可以定义为：default->白色，black->黑色，black-translucent->透明，分别如下：

当然从图上也可以看出，若值为black-translucent，网页将会上移，从最顶部显示网页，占据一定空间。