遇到的一些坑

  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. 哈工大 NLP 实验一 汉语分词系统

    NLP实验代码可见github:NLP实验代码整理 本实验会查重,而且写起来难度比较大,建议早一些开始.实验报告要用顶会论文形式呈现,建议使用overleaf里的ACL论文latex模板比较方便一点.

  2. ELK监控nginx日志总结

    ELK介绍 ELK即ElasticSearch + Logstash + kibana ES:作为存储引擎 Logstash:用来采集日志 Kibana可以将ES中的数据进行可视化,可以进行数据分析中 ...

  3. Spring Cloud Gateway 不小心换了个 Web 容器就不能用了，我 TM 人傻了

    个人创作公约:本人声明创作的所有文章皆为自己原创,如果有参考任何文章的地方,会标注出来,如果有疏漏,欢迎大家批判.如果大家发现网上有抄袭本文章的,欢迎举报,并且积极向这个 github 仓库 提交 i ...

  4. think php 框架下拉分页

    //以对象的形式获取数据库$data变量的信息,将lastPage()传输至页面 $lastpage = $data->lastPage(); $this->assign('lastpag ...

  5. supervisor启动报错

    supervisor 启动失败报错 Error: Another program is already listening on a port that one of our HTTP servers ...

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

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

  7. mysql 创建临时表

      创建临时表 create TEMPORARY table SalesSummary( product_name VARCHAR(50) NOT NULL, total_sales DECIMAL( ...

  8. MySQL 字符集相关

    为了支持各个国家的不同语言,MySQL 从4.0 版本开始支持了很多种字符集,且每种字符集支持了 N 多种排序规则.我们可以在建表的时候指定字符集的排序规则,不指定时会有一个默认规则. 字符集和排序规 ...

  9. python中的super是什么？

    技术背景 python中的super,名为超类,可以简单的理解为执行父类的__init__函数.由于在python中不论是一对一的继承,还是一子类继承多个父类,都会涉及到执行的先后顺序的问题.那么本文 ...

  10. CentOS7 yum源修改为阿里，配置阿里epel源

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 一.概念/区分: yum源 什么是yum源: yum是一个在CentOS.RedHat和Fedora操作系统中使用的Shell前端软件包管理器. ...