web APP 开发之踩坑手记

Posted 梦中飞雪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web APP 开发之踩坑手记相关的知识,希望对你有一定的参考价值。

屏蔽输入框怪异的内阴影

-webkit-appearance:none

禁止自动识别电话和邮箱

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

禁止用户选择文本

-webkit-user-select:none

宽度设置为100%,加了padding或border后出现滚动条

box-sizing:border-box

touchcancel 事件

touchcancel事件 是当某种touch事件非正常结束时触发,属于系统事件。

300ms 单击延时

click事件因为要等待双击确认,会有300ms延时,在移动端体验不好。开发者大多会使用封装的tap事件来代替click事件,所谓的tap事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。

移动端点透事件

base64编码图片替换url图片

对于一些小图片icon之类的,可以将图片用base64编码,来减少网络请求。

手机拍照和上传图片

<!-- 选择照片 --> <input type=file accept="image/*"> <!-- 选择视频 --> <input type=file accept="video/*">

transfrom: translate3d 开启动画GPU硬件加速。

ios体验良好,但在一些低端android机型可能有意想不到效果。

设置placeholder ,但当focus的时候文本没有隐藏。

input:focus::-webkit-input-placeholder{ opacity: 0; }

background-image和image的加载区别

在网页加载的过程中,以css背景图存在的图片background-image会等到结构加载完成(网页的内容全部显示以后)才开始加载,而html中的标签img是网页结构(内容)的一部分会在加载结构的过程中加载,换句话讲,网页会先加载标签img的内容,再加载背景图片background-image,如果你用引入了一个很大的图片,那么在这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。

移动端1像素问题

以上是关于web APP 开发之踩坑手记的主要内容,如果未能解决你的问题,请参考以下文章

centos部署flask+nginx+uwsgi之踩坑指南

webpack4之踩坑总结

微信抢票之踩坑

ef+Npoi导出百万行excel之踩坑记

#yyds干货盘点#Flowable-UI最新版6.7.0入门篇之踩坑记录

AeroSpike踩坑手记1:Architecture of a Real Time Operational DBMS论文导读