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

最近做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">
<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化):

<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,网页将会上移,从最顶部显示网页,占据一定空间。

评论
暂无评论
发表评论