移动前端开发经验小结

baiy 发布于2019-08-02 11:09 / 1626人阅读

摘要：一概要本文档针对移动前端开发，包括里面的页面，非应用。一个失败的圆圆角在移动平台上开发时，用画一个圆很简单，只需要一句代码不过，在上，这个定义将会失效，而显示为默认的矩形。

一、概要

本文档针对移动前端开发，包括 Hybrid 里面的web页面，非 Native 应用。

二、适用

所有经验适用于：iOS6.0+, Android4.0+

三、小结

<1>css伪类:active

如果你想使用元素的伪类来实现按下激活状态，那么你需要知道以下问题：

iOS上的几乎任何浏览器，定义元素的伪类 :active 都是无效；

Android上，Android Browser 和 Chrome 都支持伪类 :active ，其它第三方浏览器有部分不支持；

定义了 :active 并且当前浏览器环境支持，当手指在滚动或者无意间的划过时，:active 状态都会被激活；

为了规避上述所有的问题，如果需要按下激活状态，推荐使用 js 新增一个 className

<2>清除输入框内阴影

iOS上的几乎任何浏览器输入框（input, textarea）默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

input,
textarea {
    /* 方法1: 去掉边框 */
    border: 0;

    /* 方法2: 边框色透明 */
    border-color: transparent;

    /* 方法3: 重置输入框默认外观 */
    -webkit-appearance: none;
    appearance: none;
}

<3>圆角Bug

手机在 Android Browser4.4.2 上（其他版本未测），如果你使用了 border-radius，并且使用了 -webkit-transform 属性，当使用了 translatez 或者 translate3d 值，圆角会出现问题：

.test {
    border: 2px solid red;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: gray;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    -webkit-transform: translate(0, 0) translatez(0);
    transform: translate(0, 0) translatez(0);
}

如上代码，-webkit-transform: translate(0, 0) translatez(0) 将会导致圆角无法包裹住 background-color。

当然，-webkit-transform: translate3d(0, 0, 0) 也是一样的，所以如果你的某个场景是这样的，那么可以直接使用 -webkit-transform: translate(0, 0) 来避免这个问题

<4>边框圆角致背景溢出

在红米和OPPO等手机某些版本的 Android Webview 中，如果一个元素定义了 border + border-radius，这时如果该元素有背景，那么背景将会溢出圆角之外。

之所以会出现这个问题：其主要原因是因为CSS对背景裁剪（background-clip）有不同的处理方式，通常它可以是 border-box | padding-box | content-box 这3种方式。

浏览器的默认裁减方式是 border-box，即溢出 border 之外的背景都将被裁减。

对于上述无法裁减边框之外背景的手机，将值定义为 padding-box | content-box 都能fix这问题，不过更推荐使用 padding-box。因为使用 content-box，如果定义了 padding 不为 0，背景将无法铺满元素。

<5>一个失败的圆（圆角）

在移动平台上开发时，用CSS画一个圆很简单，只需要一句代码：

.circle {
    border-radius: 50%;
}

不过，在 Android Browser2.* 上，这个定义将会失效，而显示为默认的矩形。

因为 Android Browser2. 不支持以百分比作为 border-radius 的值，所以如果你需要兼容 Android Browser2.，那么你可以这样：

.circle {
    width: 10rem;
    height: 10rem;
    border-radius: 5rem;
}

如果你觉得这样定义不够灵活，想懒一点，那么其实可以给 border-radius 预设一个比较大的值，比如 100rem，用以避免当元素的尺寸变了，圆角半径也得跟着变，除非元素的尺寸超出了你预设的阀值。

<6>禁止文本缩放

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

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

<7>邮箱地址识别
在 Android （iOS不会）上，浏览器会自动识别看起来像邮箱地址的字符串，不论有你没有加上邮箱链接，当你在这个字符串上长按，会弹出发邮件的提示。

关闭邮箱地址识别：

开启邮件发送：

dooyoe@gmail.com

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

-webkit-touch-callout: none;

}
PS：需要注意的是，该方法只在 iOS 上有效
<9>移动端取消touch高亮效果
在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来禁止：

`.xxx {

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

}`
这个设置，在大部分机子上都是起效果的。但是，移动端三星自带浏览器，点击页面任意a标签时，设置-webkit-tap-highlight-color:rgba(0,0,0,0)还是会有阴影底色，这应该是浏览器强制加上去的，通过代码设置也无法覆盖。

有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。
<10>移动端禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：

div {
    -webkit-user-select: none;
}

就这么简单，但是目前只支持webkit内核的浏览器。
今天先找这些明天继续；

GPU云服务器云服务器前端开发经验前端移动开发移动前端开发移动前端开发教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52797.html

移动前端开发经验小结

摘要：一概要本文档针对移动前端开发，包括里面的页面，非应用。一个失败的圆圆角在移动平台上开发时，用画一个圆很简单，只需要一句代码不过，在上，这个定义将会失效，而显示为默认的矩形。一、概要本文档针对移动前端开发，包括 Hybrid 里面的web页面，非 Native 应用。二、适用所有经验适用于：iOS6.0+, Android4.0+ 三、小结 css伪类:active 如果你想使...

Zoom 2019-08-29 16:17 评论0 收藏0
2018.11.19秋招末第二波前端实习/校招小结

摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，vue技术栈时间背景大概是在11月9日准备...

suxier 2019-08-29 17:21 评论0 收藏0
2018.11.19秋招末第二波前端实习/校招小结

摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，vue技术栈时间背景大概是在11月9日准备...

canger 2019-08-26 13:25 评论0 收藏0
wap html5播放器和直播开发小结

摘要：此文已由作者吴家联授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。播放器的设计思路重构后应该包含这些功能支持点播非加密的和直播播放兼容适配移动端根据平台自动选择使用还是。直播的一些特点直播状态的判断。此文已由作者吴家联授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。去年年中的时候，借着产品改版的机会，将之前的h5播放器好好整理重构了一番...

Miyang 2019-06-28 11:01 评论0 收藏0