遇到的一些坑

  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. omnet++：cMessage、cSimpleModule、cGate

    cMessage Message可以被调度(self-message).取消.从一个Gate发送出去.直接发给另一个module:所有以上,都是通过cSimpleModule来实现的. Message ...

  2. 超好用的Markdown编辑器Typora中的常见语法

    目录 下载网址 安装 一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 二.语法环境 三.单选 四.字体 五.分割符 六.列表 七.图片引入 八.表格 九.超链接 下载网址 正版中 ...

  3. Tableau绘制漏斗图、甘特图、瀑布图、镶边面积图、阴影坡度图

    Tableau绘制漏斗图.甘特图.瀑布图.镶边面积图.阴影坡度图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. 漏斗图 数据源 1.1 分色直条漏斗图 (1) ...

  4. LeetCode-010-正则表达式匹配

    正则表达式匹配 题目描述:给你一个字符串 s 和一个字符规律 p,请你来实现一个支持 '.' 和 '*' 的正则表达式匹配. '.' 匹配任意单个字符 '*' 匹配零个或多个前面的那一个元素 所谓匹配 ...

  5. DPLL 算法（求解k-SAT问题）详解（C++实现）

    \(\text{By}\ \mathsf{Chesium}\) DPLL 算法,全称为 Davis-Putnam-Logemann-Loveland(戴维斯-普特南-洛吉曼-洛夫兰德)算法,是一种完备 ...

  6. 【FAQ】接入HMS Core推送服务过程中一些常见问题总结

    HMS Core 推送服务(Push Kit)是华为提供的消息推送平台,建立了从云端到终端的消息推送通道.开发者通过集成推送服务,可以向客户端应用实时推送消息,构筑良好的用户关系,提升用户的感知度和活 ...

  7. EasySwoole-ElasticSearch-Head启动

  8. LGP6276题解

    众所周知,排列是一个置换,一个置换是一车环. 步数就是这些环长的 \(lcm\). 如果你去思考直接 DP,会发现很困难,根本设不出来状态.于是考虑正难则反:每个质数幂 \(p^k\) 对答案的贡献. ...

  9. VS2010 查看代码编辑器中的变量

    查看变量的使用情况 1.选中代码中的变量 2.右键 Find Usages

  10. C#中值类型与引用类型

    值类型 A,像int, float, char , double,bool等都是值类型 B,string, 自定义类等都是引用类型 它们的区别:源于复制策略的不同, 值类型直接包含值,换言之,变量引用 ...