北京乐逍遥网站设计有限公司|乐逍遥网站设计|乐逍遥网站建设|乐逍遥建站|php知识|前端技术|后端技术|网站源码|移动开发|网站运营|UI设计|数据库|网站设计|网站开发|小程序|乐逍遥每日一句|乐逍遥福利图片
主页 > 前端开发 > WebApp >

移动端web开发技巧

时间:2020-03-19  编辑:

META相关

1. 添加到主屏后的标题(IOS)

<meta name="apple-mobile-web-app-title" content="标题">

2. 启用 WebApp 全屏模式(IOS)

当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果)

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

3. 百度禁止转码

通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心。不过我们可以通过这个meta标签来禁止它:

<meta http-equiv="Cache-Control" content="no-siteapp" />

百度SiteApp转码声明:http://t.cn/R28wSBl

4. 设置状态栏的背景颜色(IOS)

设置状态栏的背景颜色,只有在"apple-mobile-web-app-capable" content="yes"时生效

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

content 参数:

5.移动端手机号码识别(IOS)

在 iOS Safari (其他浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:

可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别:

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

开启电话功能

<a href="tel:123456">123456</a>

开启短信功能:

<a href="sms:123456">123456</a>

6. 移动端邮箱识别(Android)

与电话号码的识别一样,在安卓上会对符合邮箱格式的字符串进行识别,我们可以通过如下的meta来管别邮箱的自动识别:

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

同样地,我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能:

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

7. 添加智能 App 广告条 Smart App Banner(IOS 6+ Safari)

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

8. IOS Web app启动动画

由于iPad 的启动画面是不包括状态栏区域的。所以启动图片需要减去状态栏区域所对应的方向上的20px大小,相应地在retina设备上要减去40px的大小。

<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"><link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"><link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"><link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"><link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"><link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

landscape:横屏 | portrait:竖屏

9. 添加到主屏后的APP图标

指定web app添加到主屏后的图标路径,有两种略微不同的方式:

<!-- 设计原图 --><link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed"><!-- 添加高光效果 --><link href="short_cut_114x114.png" rel="apple-touch-icon">

效果:

移动端web开发技巧

图标尺寸:

可通过指定size属性来为不同的设备提供不同的图标(但通常来说,我们只需提供一个114 x 114 pixels大小的图标即可 )

官方说明如下:

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app 
icons in all four sizes.For iPhone and iPod touch both of these sizes are required:57 x 57 pixels114 x 114 pixels (high resolution)For iPad, both of these sizes are required:72 x 72 pixels144 x 144 (high resolution)

10. 优先使用最新版本 IE 和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

11.viewport模板

<html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>标题</title><link rel="stylesheet" href="index.css"></head><body>这里开始内容</body></html>

返回
顶部