Web APP开发技巧总结

时间 2019-11-20

标签 web app 开发技巧总结栏目 HTML 繁體版

原文原文链接

1、META/LINK相关：

一、百度禁止转码

经过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，很是之恶心。不过咱们能够经过这个meta标签来禁止它：php

二、添加到主屏后的标题（IOS）

三、启用 WebApp 全屏模式（IOS）

当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入连接进入并无此效果）chrome

PS：然而，经本人用5S测试，设置"apple-touch-fullscreen"并无什么卵用，但愿了解者能在底部评论告知app

四、设置状态栏的背景颜色（IOS）

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

content 参数：

default ：状态栏背景是白色。
black ：状态栏背景是黑色。
black-translucent ：状态栏背景是半透明。若是设置为 default 或 black ,网页内容从状态栏底部开始。若是设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

六、移动端手机号码识别（IOS）

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

7位数字，形如：1234567
带括号及加号的数字，形如：(+86)123456789
双链接线的数字，形如：00-00-00111
11位数字，形如：13800138000

可能还有其余类型的数字也会被识别。咱们能够经过以下的meta来关闭电话号码的自动识别：

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

（2）开启电话功能：

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

（3）开启短信功能：

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

七、移动端邮箱识别（Android）

与电话号码的识别同样，在安卓上会对符合邮箱格式的字符串进行识别，咱们能够经过以下的meta来管别邮箱的自动识别：

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

一样地，咱们也能够经过标签属性来开启长按邮箱地址弹出邮件发送的功能：

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

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

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

九、IOS Web app启动动画

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

<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<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">
<!-- iPad (Retina, landscape) -->
<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：竖屏）

十、添加到主屏后的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)

十一、优先使用最新版本 IE 和 Chrome

2、HTML/CSS

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

在iOS中，默认状况下键盘是开启首字母大写的功能的，若是启用这个功能，能够这样：

二、关闭iOS输入自动修正

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

三、禁止文本缩放

当移动设备横竖屏切换时，文本的大小会从新计算，进行相应的缩放，当咱们不须要这种状况时，能够选择禁止：

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

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

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

在iOS上，输入框默认有内部阴影，但没法使用 box-shadow 来清除，若是不须要阴影，能够这样关闭：

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

五、快速回弹滚动

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

早期的时候，移动端的浏览器都不支持非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

六、移动端禁止选中内容

若是你不想用户能够选中页面中的内容，那么你能够在css中禁掉：

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

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

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

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

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

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

一般当你在手机或者pad上长按图像 img ，会弹出选项存储图像或者拷贝图像，若是你不想让用户这么操做，那么你能够经过如下方法来禁止：

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

参考资料：

http://www.cnblogs.com/PeunZhang/p/3407453.html#question_1