遇到的一些坑

  1. 问题：手机端 click 事件会有大约 300ms 的延迟

    原因：手机端事件 touchstart --\> touchmove --> touchend or touchcancel --> click，因为在touch事件触发之后，浏览器要判断用户是否会做出双击屏幕的操作，所以会等待300ms来判断，再做出是否触发click事件的处理，所以就会有300ms的延迟

    解决方法：使用touch事件来代替click事件，如 zepto.js 的tap事件和fastClick，还有我自己也写了个移动端手势操作库 mTouch，都有相应的事件可以代替click事件解决这个问题

  2. 问题：在部分机型下（如小米4、小米2s、中兴） body 设置的 font-size 是用 rem 单位的话，若其他元素没有设置font-size，该font-size值继承于body，则会很高概率出现字体异常变大的情况

    原因：估计是跟app的webview默认设置有关，body的font-size使用rem单位，就是相对于当前根节点的font-size来确定的，可能在某些webview的设置下，body用的是webview设置的默认字体大小，因为在我给html设置了一个px单位的默认font-size时，还是会出现字体异常变大的情况，具体webview的一些细节就没有再研究了

    解决方法：body设置一个px单位的默认font-size值，不用rem，或者给字体会异常变大的元素设定一个px单位的font-size值

  3. 问题：使用zepto的 tap 事件时会出现“点透”bug，比如：一个元素A绑定了tap事件，紧跟其后的元素B绑定了click事件，A触发tap事件时将自己remove掉，B就会自动“掉”到A的位置，接下来就是不正常的情况，因为这个时候B的click事件也触发了

    原因：因为tap事件是通过 touchstart 、touchmove 、 touchend 这三个事件来模拟实现的，在手机端事件机制中，触发touch事件后会紧接着触发touch事件坐标元素的click事件，因为B元素在300ms内刚好“掉”回来A的位置，所以就触发了B的click事件，还有zepto的tap事件都是代理到body的，所以想通过e.preventDefault()阻止默认行为也是不可行的

    解决方法：（1）A元素换成click事件；（2）使用我写的库 mTouch 来给A绑定tap事件，然后在事件回调中通过e.preventDefault()来阻止默认行为，或者换用其他的支持tap事件的库

  4. 问题 ios自动识别数字为手机号码，导致部分设置好的样式无效（字体颜色等）

    原因 ios自动识别数字后会给数字加上 <a href="tel:数字">数字</a> 标签，所以数字的部分样式继承了a标签的样式，导致部分样式无效

    解决方法：（1）meta 标签加上 <meta name="format-detection" content="telephone=no" /> 阻止默认识别数字为电话；（2）设置样式的时候 css 选择器把a标签选上，如：

    <span class="number">123<span>
    
// 原来样式
    
.number {
    
color: #f00;
    
}
    
// 修改后样式
    
.number, .number a {
    
color: #f00;
    
}

一些有用技能点

  1. 通过设置css属性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手机端webkit浏览器 点击按钮或超链接之类的 默认灰色背景色

  2. 设置css属性 -webkit-user-select:none; 控制用户不可选择文字

  3. 区域性 overflow: scroll | auto 滚动时使用原生效果：-webkit-overflow-scrolling: touch （ios8+，Android4.0+）

  4. 单行、多行溢出省略

    /* 单行省略 */
    
.ellipsis {
    
overflow: hidden;
    
text-overflow: ellipsis;
    
white-space: nowrap;
    
}

/* 多行省略 */
    
.ellipsis-2l {
    
overflow : hidden;
    
text-overflow: ellipsis;
    
display: -webkit-box;
    
-webkit-line-clamp: 2;    /* 数值代表显示几行 */
    
-webkit-box-orient: vertical;
    
}

  5. 垂直居中常用方法：

    <!-- html结构 -->
    
<body>
    
<div class="wrap">
    
    <div class="box"></div>
    
</div>
    
</body>

/* css样式 */

/* (1) 模仿单行文字居中的方式 */
    
.wrap {
    
width: 200px;
    
height: 80px;
    
line-height: 80px;
    
}

.box {
    
display: inline-block;
    
vertical-align:middle;
    
}

/* (2) 已知宽高，通过position:absolute; */
    
.wrap {
    
width: 200px;
    
height: 200px;
    
position: relative;
    
}

.box {
    
width: 100px;
    
height: 80px;
    
position: absolute;
    
left: 50%;
    
top: 50%;
    
margin: -50px 0 0 -40px;
    
}

/* (3) 未知宽高，通过css3属性 transfrom */
    
.wrap {
    
width: 200px;
    
height: 200px;
    
position: relative;
    
}

.box {
    
position: absolute;
    
left: 50%;
    
top: 50%;
    
-webkit-transform: translateX(-50%) translateY(-50%);
    
transform: translateX(-50%) translateY(-50%);
    
}

/* (4) 通过flex布局 */
    
<!-- html结构 -->
    
<body>
    
<div class="wrap flexbox flexbox-center flexbox-middle">
    
    <div class="box"></div>
    
</div>
    
</body>

/* css样式 */

.flexbox {
    
display: -webkit-box;
    
display: -moz-box;
    
display: -ms-flexbox;
    
display: -webkit-flex;
    
display: flex;
    
}

/* 水平居中 */
    
.flexbox-center {
    
-webkit-box-pack: center;
    
-moz-box-pack: center;
    
-ms-flex-pack: center;
    
-webkit-justify-content: center;
    
justify-content: center;
    
}

/* 垂直居中 */
    
.flexbox-middle {
    
-webkit-box-align: center;
    
-moz-box-align: center;
    
-ms-flex-align: center;
    
-webkit-align-items: center;
    
align-items: center;
    
}

  6. retina屏幕实现真正的1px边框

    <!-- html结构 -->
    
<body>
    
<div class="box retina-border rt-bd-all"></div>
    
</body>

/* css样式 */

.box {
    
width: 200px;
    
heigth: 100px;
    
box-sizing: border-box;
    
border: 1px solid #aaa;
    
}

/* 去掉元素原有的边框 */
    
.retina-border {
    
position: relative;
    
border: none;
    
}

/* 通过设置伪元素放大到2倍的宽高，设置1px边框，再缩小1倍，以达到0.5px边框的效果*/
    
.retina-border:after {
    
content: '';
    
display: block;
    
width: 200%;
    
height: 200%;
    
position: absolute;
    
left: 0;
    
top: 0;
    
box-sizing: border-box;
    
border: 0px solid #aaa;
    
-webkit-transform-origin: left top;
    
transform-origin: left top;
    
-webkit-transform: scale(.5);
    
transform: scale(.5);
    
}

.rt-bd-all:after {
    
border-width: 1px;
    
}

/* 如果只是想设置一条边框，可以这样改一下，以此类推 */

<!-- html结构 -->
    
<body>
    
<div class="box retina-border rt-bd-b"></div>
    
</body>

/* css样式 */

.tr-bd-b:after {
    
border-bottom-width: 1px;
    
}

.tr-bd-t:after {
    
border-top-width: 1px;
    
}

.tr-bd-l:after {
    
border-left-width: 1px;
    
}

.tr-bd-r:after {
    
  border-right-width: 1px;
    
}

  7. 关于水平、垂直、多列布局的多种实现参照：《利用HTML和CSS实现常见的布局》

web app遇到的一些坑及小技能（持续更新...）的更多相关文章

  1. Mysql注入小tips --持续更新中

    学习Web安全好几年了,接触最多的是Sql注入,一直最不熟悉的也是Sql注入.OWASP中,Sql注入危害绝对是Top1.花了一点时间研究了下Mysql类型的注入. 文章中的tips将会持续更新,先说 ...

  2. webpack1.x环境配置与打包基础【附带各种 "坑" 与解决方案！持续更新中...】

    首先介绍传统模块化开发的主流方案: 1.基与CMD的sea.js,玉伯提出的解决方案,据说原来京东团队在使用.用时才定义,就近加载. 2.基于AMD的require.js,之前在用.提前声明与定义.国 ...

  3. web APP 开发之踩坑手记

    屏蔽输入框怪异的内阴影 -webkit-appearance:none 禁止自动识别电话和邮箱 <meta content="telephone=no" name=" ...

  4. web端小知识点--持续更新

    1.弹性滚动overflow:auto; -webkit-overflow-scrolling: touch; -mo-overflow-scrolling: touch; overflow-scro ...

  5. [Tools] Eclipse使用小技巧-持续更新

    [背景] 使用之中发现一些eclipse使用的小技巧,记录下来供以后查阅   Eclipse保存preferences,并导入到其他workspaces The Export wizard can b ...

  6. golang 小知识-持续更新中

    Golang 中的指针 - Pointer Go 的原生数据类型可以分为基本类型和高级类型,基本类型主要包含 string, bool, int 及 float 系列,高级类型包含 struct,ar ...

  7. Python小练习(持续更新....)

    最近一直在学习python,这些小练习有些是书上的,有些是别人博客上的! # 1.题目1# 给一个字符串,统计其中的数字.字母和其他类型字符的个数:# 比如输入“124mid-=”,输出:数字=3,字 ...

  8. springboot实现web应用过程中的摸爬打滚（持续更新ing）

    最近在做公司的网站项目,后端用到springboot.怎么说呢,记录总结一下自己开发过程中遇到的坑和一些心得体会,以及一些技巧.方便以后回顾复习,也供同行们参考. 开发环境:eclipse2018-1 ...

  9. pandas常用小trick(持续更新)

    记录一下pandas常用的小技巧,时间长了干别的去了会忘记,记录一下: 1. 在处理数据过程中涉及到label和null的处理方法 # 方法一 df['height'][df.height < ...

随机推荐

  1. WIN10:隐藏记事本等任务栏项目的最近访问

    右键任务栏 点开任务栏设置 关闭最近打开项的显示按钮

  2. vue项目npm run dev报错events.js:160 throw er; // Unhandled 'error' event listen EADDRINUSE :::8002

    出错情况,如下图: 报错原因: listen EADDRINUSE :::8002 意思是当前8002端口被占用 解决办法: 一:简单粗暴:关掉可能影响的相关程序,重新执行启动. 二: 1.Win+R ...

  3. VS Code nodejs智能补全typings

    安装typings node.js自动补全使用npm全局安装typings npm install -g typings -安装语法插件以安装node.js自动补全为例,在项目根目录下使用bash或者 ...

  4. [2022-3-5] OICLASS-USACO提高组模拟赛2 B: Cow Frisbee

    题意 在一排奶牛中,对于每两头奶牛,如果两头奶牛之间没有奶牛比这两头高,则答案累加这两头奶牛的距离. 分析 设现在分析的奶牛为第 \(i\) 头,它向左扔出了一个飞盘,显然它的飞行高度为奶牛的高度.飞 ...

  5. jmeter（二十八）利用beanshell进行多重断言

    在接口测试中,我们对返回结果的正确性判断一般是基于响应报文的返回内容进行断言.但有些时候,按照正常的业务逻辑来说,一个请求返回的内容是多种不同的. 比如:用户注册功能,注册成功是正常的返回messag ...

  6. 对象中的apply&call

    显式绑定法 apply/call(); 通过显式绑定法可以使用另一个对象中的方法 apply/call()都是JS预定义的方法, 他们都可以用于将一个对象作为参数调用对象方法 FOR example ...

  7. Java UDP 编程

    1.客户端代码 1 import java.io.IOException; 2 import java.net.DatagramPacket; 3 import java.net.DatagramSo ...

  8. 【混合编程】C/C++调用Fortran的DLL

    [混合编程]C/C++调用Fortran的DLL 以一个简单的加法器为例,介绍C/C++调用Fortran语言DLL的操作过程 一.Fortran操作 1.1 Fortran代码 首先是加法功能的实现 ...

  9. asp.net多语言网站的完整解决方案

    应用场景:通过前端切换网站使用英语.中文两种语言. 解决思路:ResourceManager会通过当前线程区域性信息,读取对应的Resource文件,从而达到切换语言的效果,其实质是是在切换当前线程的 ...

  10. 【KiCad镜像】下载与安装

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 一.KiCad介绍 KiCad EDA 是一款用于印刷电路板设计的开源自由软件,基于 GPLv3 开源协议. 软件包含工程项目管理.原理图设计.线 ...