一些移动 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); } } |
---|
- 移植Windows自宿主WCF服务到Linux/Mono2.8
- IISWeb应用防火墙WAF
- WordPress 开发之让浏览器自动加载最新的CSS、JS文件(免刷新缓存)
- 在Windows 7无法通过UNC路径连接到共享文件夹的解决方法
- SQL Sever索引
- 使用SQL Server Management Studio 2008 将数据库里的数据导成脚本
- jquery mobile 移动web(5)
- [C#6] 1-using static
- WordPress 中的 Debug 模式(调试模式)
- Windows Server 2008 R2 Server Core 的 Microsoft .NET Framework 4安装程序
- [C#6] 4-string 插值
- 使用API Key验证WCF Data Service
- WordPress By Example:一个WordPress 主题搜索引擎
- jquery mobile 移动web(4)
- 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 数组属性和方法
- 08 . Nginx状态码
- 09 . Nginx配置LNMP和LNMT架构
- 01 . Mysql简介及部署
- jquery点击按钮,添加一行input输入框
- 02 . Mysql基础操作及增删改查
- 03 . MysSQL权限和备份
- 04 . Mysql主从复制和Mycat读写分离
- 02 . Python之数据类型
- 05 . k8s实战之部署PHP/JAVA网站
- 拖不得了,Android11真的来了,最全适配实践指南奉上
- 03 . Python入门之运算符
- 04 . Python入门之条件语句
- vue-element的select下拉框赋值
- 女儿拿着小天才电话手表问我App启动流程
- 数据库三问—快手真题