遇到的一些坑

  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. Vue之路由的使用

    零.传统路由与SPA的区别 传统开发方式下,URL改变后,就会立刻发生请求去请求整个页面,这样可能请求加载的资源过多,可能会让页面出现白屏. 在SPA(Single Page Application) ...

  2. MM32F0020 UART1中断接收

    目录: 1.MM32F0020简介 2.初始化MM32F0020 UART1和NVIC中断 3.编写MM32F0020 UART1中断接收函数 4.编写MM32F0020 UART1发送字节和ASCI ...

  3. java几种数据的默认扩容机制

    当底层实现涉及到扩容时,容器或重新分配一段更大的连续内存(如果是离散分配则不需要重新分配,离散分配都是插入新元素时动态分配内存),要将容器原来的数据全部复制到新的内存上, 这无疑使效率大大降低.加载因 ...

  4. tp5.0 composer下载phpexcel 实现导出excel 表格

    tp5.0 composer下载phpexcel 实现导出excel 表格 1.在下载好的tp5.0 框架里面使用 composer 下载phpexcel 的插件 composer require p ...

  5. vue结合antV/g6 实现网络拓扑图

    最近很多业务场景都会需要用到拓扑图,翻找了很多资料,最后选择了antV/g6,主要原因有以下几点: 1.阿里出品,所以框架的成熟性有保障 2.业务场景契合(1.规则拓扑图:2.动画流向:每个节点会有流 ...

  6. 结合AngularJS实现拖拽

    最近项目中要实现,左侧树向右侧树中元素的拖拽功能,开始在网上看了好多ng-drag等等操作,都没有实现预想的效果,偶然发现一篇博客,然后根据博客改编,实现了自己想要的效果.下面简单的分析一下实现过程. ...

  7. 25 面向对象编程 继承概念 代码 快捷键 super注意点

    继承概念 继承的本质是对某一批的抽象,从而实现对现实世界更美好的建模. extends的意思的"扩展".子类是父类的扩展. JAVA中类只有单继承,没有多继承!理解:一个儿子只能有 ...

  8. Oracle视图（view）传参数教程

    废话不多说,直接上例子! 创建包: create or replace package p_view_param is function set_param(num number) return nu ...

  9. 4月28日 python学习总结 线程与协程

    一. 异步与回调机制 问题: 1.任务的返回值不能得到及时的处理,必须等到所有任务都运行完毕才能统一进行处理 2.解析的过程是串行执行的,如果解析一次需要花费2s,解析9次则需要花费18s 解决一: ...

  10. python 实现批量md转word

    # qianxiao996精心制作 #博客地址:https://blog.csdn.net/qq_36374896 #md批量转word import os def auto_md_to_docx(f ...