移动前端开发经验小结
一、概要
本文档针对移动前端开发,包括 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);
}
<div class="test"></div>
如上代码,-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不会)上,浏览器会自动识别看起来像邮箱地址的字符串,不论有你没有加上邮箱链接,当你在这个字符串上长按,会弹出发邮件的提示。
关闭邮箱地址识别:
<meta name="format-detection" content="email=no" />
开启邮件发送:
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
<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内核的浏览器。
今天先找这些明天继续;
移动前端开发经验小结相关推荐
- 在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用
这是 Jerry 2021 年的第 26 篇文章,也是汪子熙公众号总共第 297 篇原创文章. 本文绝非标题党. Jerry 前一篇文章 SAP Cloud Application Programmi ...
- React和redux,ES6等前端开发经验记录总结(都是干货,看到是你的运气)
React和redux,ES6等前端开发经验记录总结(都是干货,看到是你的运气) React和redux,ES6等前端开发经验记录总结(都是干货,看到是你的运气) 前言 箭头函数this指向 有趣的r ...
- 【实训总结】Python从入门到前端知识小结,再到Flask框架搭建在线书城~
实训小结:Python入门到爬虫 Python实训 一.基础入门 1. 行业 2. 搭建开发环境 3.如何使用PyCharm创建一个Python项目 4. 如何在Pycharm创建的Python项目中 ...
- 2017年前端工作小结,个人踩坑之旅,前端学习者的杂谈
工作差1月就要满一年了,这一年中水平并没有直接性的提升,以至于初学前端时无法探究的诸多问题,依旧没有头绪,但工作就是的一次次跳坑和爬坑,它终究是带给了我一些... 关于工作,在一家创业公司(没人带-_ ...
- js 查错_7年前端开发经验的我,写了本Vue.js实战开发,开源高清PDF下载
Vue作为目前发展最迅速的前端框架越来越多的受到前端T程师青睐,Vue社区也是Web前端最活跃的社区之一. 更多的公司在转为Vue框架,但针对Vue优秀权威.实战的图书相对欠缺,梁灏著<Vue. ...
- javascript --- [读书笔记] 回流与重绘 前端优化小结
1. 浏览器渲染原理 请说出: 从用户在浏览器地址输入网址,到看整个页面,中间都发生了哪些事情? HTTP请求阶段 HTTP响应阶段 浏览器渲染阶段 1.1 可能用到的知识 1.1.1 进程 Proc ...
- 小程序支付及H5支付前端代码小结
小程序支付和H5支付前端都不需要引入其他的js , 只需要后台将相关的参数 ( timeStamp: '', nonceStr: '', package: '', signType: 'MD5', p ...
- 阿里腾讯前端一面小结
阿里一面 1. 自我介绍.说完3个项目后插入 2. 用户体验 项目逻辑 项目优势在哪里? 3. 项目一三中的难点(后台管理系统) 插件的使用及扩展.动态 ...
- 前端开发经验:当初我是如何学习JavaScript
以前,我总幻想着10天精通JavaScript,一个月精通PHP等之类.最近我才发现这个想法很愚蠢.所以我现在学习JavaScript教程已经不再强迫自己说一个月学完,两个月精通的.下面分享一下我是如 ...
最新文章
- linux命令运行中,输入命令,如果输入错误,怎么删除?
- LeetCode第45场双周赛-解题报告
- 英语四级真题作文 计算机,2019年12月英语四级写作范文:电脑
- (zhuan) LSTM Neural Network for Time Series Prediction
- 1031. Hello World for U (20)-PAT甲级真题
- archive —— 软件历史版本存档及下载、jar 包
- 2021-09-27
- 华为端口聚合命令_华为交换机两种端口聚合模式使用实例
- 考研数学常见的函数图像
- Mybatis遇到No constructor found in ....的解决方法
- 前端 day01 常用基础语法
- MySQL学习笔记_03
- 淘宝4位数七段显示器模块 (74HC595)
- 看雪2020CTF 守株待兔
- 浅谈我用过的有限元软件-第一弹
- 带注释 实验7-3-5 输出大写英文字母 (15分)
- 乔布斯传记电影暂定名为《灵光乍现》
- 通过图像转换软件打造95%原创文章--真的可以告别伪原创(有点扯)
- 防火墙和安全网关的区别是什么?
- 计算机辅助焊接技术,计算机辅助焊接工艺设计,computer-aided welding process programming (CAWPP),音标,读音,翻译,英文例句,英语词典...
热门文章
- SSH生成rsa密钥对
- Open source robotics toolkits: use virtual arenas to test your robotics algorithms
- 详细介绍Oracle DBA工作职责
- 水平分库分表的关键步骤和技术难点,分库分表的几种常见玩法及如何解决跨库查询等问题...
- 【MySQL】MySQL 如何实现 唯一随机数ID
- [多级联动下拉选择框]和[Tree to Tree]续——让他们可以设置默认值
- SQL Server中的几个方法和Transact SQL 常用语句以及函数[个人推荐]
- Go 支持Protocol Buffers的配置
- 【MDCC 2015】开源选型之Android三大图片缓存原理、特性对比
- ConfigParser