MobileWeb适配(二)

一、meta设置（上接MobileWeb适配(一)）

1.移动端手机号码识别（IOS）

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

7位数字，形如：1234567
带括号及加号的数字，形如：(+86)123456789
双连接线的数字，形如：00-00-00111
11位数字，形如：13800138000
可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：

但某些时候，你关闭电话自动识别后，又希望某些电话号码长按时能够链接到 iPhone 的拨号功能和短信功能，你可以使用下面的方法实现：

（1）开启电话功能：

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

（2）开启短信功能：

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

2.移动端邮箱识别（Android）

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

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

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

3.添加智能 App 广告条 Smart App Banner（IOS 6+ Safari）

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

4、IOS Web app启动动画

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

<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：竖屏）

5、添加到主屏后的APP图标

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

<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
<link href="short_cut_114x114.png" rel="apple-touch-icon">
apple-touch-icon：在IOS6及以下的版本会自动为图标添加一层高光效果（IOS7开始已使用扁平化的设计风格）
apple-touch-icon-precomposed：使用“设计原图图标”

效果：

图标尺寸：

可通过指定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 pixels

114 x 114 pixels (high resolution)

For iPad, both of these sizes are required:

72 x 72 pixels

144 x 144 (high resolution)

添加智能 App 广告条 Smart App Banner（IOS 6+ Safari）

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

6、IOS Web app启动动画

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

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

<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
<link href="short_cut_114x114.png" rel="apple-touch-icon">
apple-touch-icon：在IOS6及以下的版本会自动为图标添加一层高光效果（IOS7开始已使用扁平化的设计风格）
apple-touch-icon-precomposed：使用“设计原图图标”

效果：

图标尺寸：

可通过指定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 pixels

114 x 114 pixels (high resolution)

For iPad, both of these sizes are required:

72 x 72 pixels

144 x 144 (high resolution)

二、HTML/CSS设置

1、关闭iOS键盘首字母自动大写

在iOS中，默认情况下键盘是开启首字母大写的功能的，如果启用这个功能，可以这样：

<input type="text" autocapitalize="off" />

2、关闭iOS输入自动修正

和英文输入默认自动首字母大写那样，IOS还做了一个功能，默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。如果不希望开启此功能，我们可以通过input标签属性来关闭掉：

3、禁止文本缩放

当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

html {
-webkit-text-size-adjust: 100%;
}

需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置 `meta viewport'。

4、移动端如何清除输入框内阴影

在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}

5、快速回弹滚动

我们先来看看回弹滚动在手机浏览器发展的历史：

早期的时候，移动端的浏览器都不支持非body元素的滚动条，所以一般都借助 iScroll;
Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动；
Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除；
iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果
在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做：

.xxx {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}

PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址：

http://www.idangero.us/sliders/swiper/index.php

6、移动端禁止选中内容

如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：

.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all （移动端不需要） */
-ms-user-select: none; /* IE 10+ */
}

7、移动端取消touch高亮效果

在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止：

html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。

8、如何禁止保存或拷贝图像（IOS）

通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：

img { -webkit-touch-callout: none; }

MobileWeb适配(二)相关推荐

【移动端适配二】H5移动端适配屏幕安全区（ios和android）
全面屏手机把整个webview(包括状态栏)给H5的话,不对状态栏进行控制往往会有以下如图问题出现,这样头部的返回按钮置于页面的安全区外,无法进行操作. 有问题的: 想要的效果: 具体的实现: 针对i ...
iOS:界面适配(二)--Universal通用程序 iPhone、iPad适配(关于xib)
本文纯属个人看法,强迫症后遗症版本:xcode 6.0 + iOS SDK 8.0 讨论范围:控制器的view(创建VC时自带的xib) ------------------------------ ...
iOS 屏幕适配 iPhone X SafeArea安全区域
三月份工作 9月份才开始自己主动了解安全区域适配问题一. 前言本文的出发点是对iOS设备的适配, 我们之前的适配只是考虑设备的尺寸, 设备的方向, 而在iPhoneX出来之后呢, 我们又多了一种考 ...
Android 9.0 简单适配
转载请声明,本文来自: 本文仅描述当前项目apk遇到的适配9.0问题,所以不是全面的,请自行参考: 适配一: 纯后台服务,需要在AndroidManifest.xml添加权限 <uses-per ...
IOS开发之——屏幕适配-AutoLayout布局实现(02)
一概述关于AutoLayout的几个概念通过布局实现屏幕适配二关于AutoLayout的几个概念 2.1 什么是Autolayout Autolayout是一种"自动布局" ...
Android 屏幕适配总结
本文主要涉及以下几篇文章 Android 屏幕适配总结 Android ConstraintLayout 使用与适配(使用篇) Android ConstraintLayout 使用与适配(适配篇) ...
android调用相机与相册的方法,手把手教你：android调用系统相机、相册功能，适配6.0权限获取以及7.0之后获取URI(兼容多版本)...
Android中调用系统相机来拍摄照片的代码,以下:html 一.首先设置Uri获取判断以及相机请求Codejava public final int TYPE_TAKE_PHOTO = 1;//Ur ...
可视化大屏的几种适配方案
对于可视化大屏项目而言,我们主要需要考虑下面两个问题: 首先是div元素的适配,需要保持每个div元素在不同分辨率的屏幕下依然会显示正常的比例,不会因为不同分辨率的屏幕而变得拉伸变形: 第二个要考虑的 ...
OpenCV AR之二维码叠加视频
OpenCV AR之二维码叠加视频前言最近心血来潮,想着用OpenCV做一个AR的小应用,也是看知乎的回答,想到了识别二维码,然后在二维码上放视频,就花了大概两三天做出了这个小demo,完成度大概 ...

MobileWeb适配(二)

MobileWeb适配(二)相关推荐

最新文章

热门文章