一些移动 Web 前端开发上的要点记录
从五月份实习到现在快三个月了,这三个月的实习时段,按照leader 的要求,每天要写日总结发RTX 内部群,每周都要写周邮件群发整个部门——就这么坚持了三个月。个人不是很赞同写日总结也写周总结的做法,但实在是拗不过leader ,不过坚持下来也发现没那么难——虽然写周总结邮件常常词穷。 这篇文章其实是摘录之前写的周邮件的内容,记录的是实习做的项目遇到的一些bug 之类的。毕竟本站也鲜有更新,就拿过来凑成水文一篇吧。
1、-webkit-text-size-adjust 中的问题
在做游戏页面的时候,按照设计稿将font-size
设置为10px,在Chrome 下遇到了小于12px 无法调试的问题。根据老经验知道可以用-webkit-text-size-adjust
调整,但居然无效,搜索才发现原来早在Chrome 37+ 就取消了-webkit-text-size-adjust
属性(据说被滥用)。
2、:active 伪类在某些移动设备下失效的问题
在做某个游戏宣传页面按要求添加个点击按钮的状态样式的时候遇到这个问题。解决方法一:;方法二:document.addEventListener("touchstart", function(){}, true);
。原因是在移动设备上,:active样式会在 touchstart的时候就触发,而我们常常想要的效果是在用户真正去点击它的时候触发。
3、伪元素失效的问题
做某个宣传页面,在实现弹窗+遮罩层的样式时候,为了体现语义化一个div 表示弹窗部分+遮罩层,打算用伪元素(::after
或::before
)实现遮罩层,但居然无法生效,后经过同事秒指点跟搜索,了解到必须设置content 属性才能生效,不然真的是成了“伪”元素了。
4、iOS 下微信不能识别二维码的问题
这部分的问题我已经写成了篇文章了并延伸了下,详见《微信内置浏览器 长按识别二维码 功能的两三个坑与解决方案》 。
5、对于display:inline(inline-block)
与float:left
水平对齐方式的区别及适用场景没有了解透彻的问题
在某页面部分内容的时候,插件页面表格那里开发要实现以底部基线来对齐的方式,之前用float 则是顶部为基线。回来后查阅了资料重新熟知了下。
6、点击事件后切换页面的延时非常长的问题
在进行某演示Demo 页面的构建工作的时候,发现点击事件后切换页面的延时非常长,排查来排查去都几乎无果;最后才偶然发现将图片压缩下就好了(一开头设计给我的图是1000+px 宽度的,我没做处理直接拿来用,写的时候CSS 放缩处理至320px 宽,每张图约700KB,想着既然本地开发状态,图片大点也没多大问题)。后面突然想到性能优化中有一条关于图片按需尺寸使用,尽量少用CSS 放缩;可见就是犯了这个错误了。
7、伪元素使用CSS3 动画在移动浏览器的支持情况
在做某游戏宣传页面的的时候发现在安卓下微信(包括UC、QQ部分浏览器)下存在伪元素不支持CSS 动画的问题,解决方式是不要用伪元素。后面测试了伪元素动画在Android 下的移动浏览器的支持情况:支持:360、Firefox;不支持:微信内置浏览器、UC、QQ
8、视网膜屏幕下的1px 还原问题
因iOS 设备独特的视网膜屏幕,视觉稿上的1px 需要采取额外的方式写出。网络上有多种方法,结合过去的团队经验,使用的是:通过媒体查询,然后采用CSS 的scale属性进行放缩来达到视觉还原 的方法。
核心代码如下:
.div:after { border-top: 1px solid #e0e0e0; content: ' '; display: block; width: 100%; position: absolute; left: 0; bottom: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) { .div:after { -webkit-transform-origin: left bottom; -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } } @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { .div:after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } |
---|
- Uva-------(11462) Age Sort(计数排序)
- hdu----(2848)Repository(trie树变形)
- 【MySQL】主从GTID复制修复
- hdu---(1800)Flying to the Mars(trie树)
- 解决Tomcat数据连接池无法释放
- hdu----(1075)What Are You Talking About(trie之查找)
- hdu--(1247)Hat’s Words(trie树)
- HDU----(4519)郑厂长系列故事——体检
- 张戈博客成功启用移动端主题:Mobile Pack
- Oracle数据库性能障碍分析利器:SYSTEMSTATE DUMP介绍
- hdu ---(4517)小小明系列故事——游戏的烦恼(Dp)
- HTTP加速器varnish安装小记(1)
- 手把手教你估算深度神经网络的最优学习率(附代码&教程)
- 批处理判断第一个硬盘的最后一个分区并进入
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浅谈在进行jsp页面编程时,路径问题的解决(绝对路径与相对路径)
- 浅谈springMVC中,中文乱码的显示问题(持续更新)
- 数据库的优化方法,一般人我不告诉他(建议收藏)
- idea 远程调试
- 嘘!高效快速的刷访问量(偷偷收藏)
- 进行JDBC操作时,连接参数的配置(附DBUtil工具类)
- JavaEE中,考勤(签到签退)功能的实现
- HTTP协议详解,浏览器和服务器交互过程详解
- 京东网页(动态)搭建,利用jquery实现
- 京东购物车(动态)网页搭建,利用JavaScript实现
- 你不知道的 TypeScript 泛型(万字长文,建议收藏)
- JavaScript中的函数、对象
- 京东购物车网页(静态)搭建
- MyBatis注解详解
- MyBatis完整环境搭建步骤