遇到的一些坑

  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. 针对python输入要求

    针对python输入要求 类型: 1.输入行数不确定,并且每一行输入一个数据. a=[] b=input() while b!='-1': //指随意使用一个值作为一个标志,来进行控制输入的行数.(在 ...

  2. 2020.11.2 异步IO 协程

    异步IO 同步IO在一个线程中,CPU执行代码的速度极快,然而,一旦遇到IO操作,如读写文件.发送网络数据时,就需要等待IO操作完成,才能继续进行下一步操作. 在IO操作的过程中,当前线程被挂起,而其 ...

  3. MariaDB 与Mysql版本对应关系

    特定MariaDB版本的完全兼容性 就InnoDB而言,MariaDB 10.2.MariaDB 10.3和MariaDB 10.4是MySQL 5.7的有限替代.然而,在每一个新的MariaDB版本 ...

  4. BBS项目（二）

    目录 BBS项目(二) ORM 创建相关表 表模型 修改admin样式 Simple-UI 注册表添加数据 注册forms类编写 注册功能前端搭建 头像实时显示功能实现 BBS项目(二) 可以在本地写 ...

  5. 【算法】经典的ML算法（后续结合工作实践完善心得）

    18大数据挖掘的经典算法以及代码实现,涉及到了决策分类,聚类,链接挖掘,关联挖掘,模式挖掘等等方面,后面都是相应算法的博文链接,希望能够帮助大家学.目前追加了其他的一些经典的DM算法,在others的 ...

  6. myBatis plus 去除生成 controller

    ​ 由于我在网上没有找到答案, 所以分享给大家学习, 我也是第一次用 mybtis plus 的新生成器生成代码, 所以基础代码都是在官网复制所得. 在这里也支持大家在解决不了问题时, 可以试着看看源 ...

  7. ubuntu目录结构

    /:根目录,一般根目录下只存放目录,不要存放文件,/etc./bin./dev./lib./sbin应该和根目录放置在一个分区中 /bin:/usr/bin:可执行二进制文件的目录,如常用的命令ls. ...

  8. async-validator 源码学习（一）：文档翻译

    async-validator 是一个表单异步校验库,阿里旗下的 Ant-design 和 Element 组件库中的表单验证使用的都是 async-validator ,目前版本已更新到 4.0.7 ...

  9. CF772D题解

    什么阴间十进制状压 题意:给定 $ n $ 数字,求定义函数 $ G(x) $ 能够表示 满足"十进制按位与为 $ x $"的集合的平方和之和乘上 \(x\),求 \(\bigop ...

  10. Azure Container App（一）应用介绍

    一,引言 容器技术正日益成为打包.部署应用程序的第一选择.Azure 提供了许多使用容器的选项.例如,我们可以使用 Azure 容器注册表来存储和管理 Docker Images.Azure Cont ...