1.点透
Q:元素A上定位另外一个元素B,点击元素B,如果元素A有事件或链接,会触发元素A上的事件或链接,即点透
A:在元素B的touchend中增加ev.preventDefault();阻止默认事件即可,请注意:此时元素内容如果过长,其原生滑动也同时阻止

elmB.addEventListener('touchend', function (ev) {
ev.preventDefault();
}, false);

2.区分点击与滑动
Q:元素A添加touchstart或touchend事件后,如果在元素A上滑动也会触发点击事件
A:区分是否是点击事件,有2种方法

方法一:
在touchend时判断touchmove事件是否触发即可

function tap(elm, callback) {
elm.addEventListener('touchstart', start, false); function start(ev) {
var b = false; this.addEventListener('touchmove', move, false);
this.addEventListener('touchend', end, false); function move() {
b = true;
} function end(ev) {
var touch = ev.changedTouches[0];
var x = touch.pageX;
var y = touch.pageY; if (!b) {
if (callback) {
callback.call(this, ev, x, y);
ev.preventDefault();
}
} this.removeEventListener('touchmove', move, false);
this.removeEventListener('touchend', end, false);
}
}
}

方法二:
touchstart时记录坐标(x1、y1),touchend时判断当前坐标(x2、y2)是否等于x1、y1

function tap(elm, callback) {
elm.addEventListener('touchstart', start, false); function start(ev) {
var touch = ev.targetTouches[0];
var intX = touch.pageX;
var intY = touch.pageY; this.addEventListener('touchend', end, false); function end(ev) {
var touch = ev.changedTouches[0];
var curX = touch.pageX;
var curY = touch.pageY; if (curX == intX && curY == intY) {
if (callback) {
callback.call(this, ev, curX, curY);
ev.preventDefault();
}
} this.removeEventListener('touchend', end, false);
}
}
}

调用:

<div>点击此处</div>
window.onload = {
var elm = document.querySelector('div'); tap(elm, function (ev, x, y) {
alert('坐标:x=' + x + ', y=' + y);
});
};

3.点击元素时加触发效果
Q:长按一个元素时如何给元素加上效果
A:首先尝试在css中给元素定义:active伪类,如果没效果则在html中给元素加上ontouchstart=""触发:active,如果还是不行,则考虑用js

动态添加样式

4.用translateX或translateY时产生抖动
Q:在给一个元素A用translate时,其后面的元素B有时会产生文字抖动或背景、边框抖动
A:给元素的父级添加translateZ即可解决

5.弹性布局宽度的问题
Q:给一行元素添加弹性布局,flex都为1,每个元素中内容长度不一致,导致不等分
A:给内部元素固定宽度即可

6.在safari浏览器中不识别日期
Q:safari浏览器中

alert(new Date('2013-11-12'));

2013-11-12这种日期格式不识别

A:在safari浏览器中设置日期需要将格式转成2013/11/12即可

7.图标模糊
Q:按照320分辨率切的图标,在iphone中图标模糊
A:iphone等手机分辨率是640的,所以图片应该按照640分辨率切,然后用background-size:50%;缩放,或写固定宽度,如在640宽度下的一

个图标宽为64px高为48px,则用backgroun-size缩放后在320分辨率下的background-size:32px 24px

8.用px切的页面在小米等手机中网页被放大
Q:用px切的页面在小米等手机的浏览器中比别的手机页面大
A:px在浏览器中表现不一致,任何浏览器默认字体大小为16px,而10px是16px的62.5%,此时设置html字号为62.5%,再用css3提供的rem(

根字号大小,即html的字号大小)将px除10进行换算即可解决

例:

html { font-size:62.5%; }
.header { font-size:1.6rem; /* 16px */ }
.footer { height:5em; /* 50px */ }

9.按照设计图切出的页面很大
Q:设计图给的是640px宽的,放到手机里看很大,用viewport缩放0.52倍在别的手机都正常,但是在小米中用自带浏览器,字号设为中,缩

放不管用
A:首先应禁止缩放,会带来别的问题,如从数据库中读出的字体带着单位如12px,字会显得非常的小
即viewport应写为

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;" />

其次用

width=device-width后,任何页面在手机里都会被解析成320宽度,所以640px的设计图中量出的单位应除2即可

10.1px的问题
Q:宽度小于1px的线有时显示不出来,等于1px的线有的细有的粗
A:网页中最小单位为1px,小于1px的线不显示出来也是正常的,应避免设置小于1px的单位。线时细时粗暂无太好的办法,一是用图片代替

,二是用很淡的颜色

11.用background-size后背景定位失效
Q:用background-size后,合并的背景图定位不准确
A:首先用了background-size后原来的单位也应该缩放,如果background-size:50%;那么量出的单位都应*0.5

HTML5开发注意事项及BUG解决的更多相关文章

  1. IDEA插件(Android Studio插件)开发示例代码及bug解决

    IDEA插件(Android Studio插件)开发示例代码及bug解决 代码在actionPerformed方法中,有个AnActionEvent e 插件开发就是要求我们复写上述的这个方法即可,在 ...

  2. HTML5外包注意事项-开发HTML5游戏的九大坑与解决方法剖析

    随着移动社区兴起,势必带动HTML5的革命.未来一两年内,HTML5移动游戏必将呈现大爆发趋势. 以下是整理的HTML5游戏研发.市场趋势以及渠道布局和技术解决方案的内容.希望大家能从本文中找到对HT ...

  3. android软件简约记账app开发day05-记账页面条目代码优化和bug解决

    android软件简约记账app开发day05-记账页面条目代码优化和bug解决 今天还是因为该bug又极大的耽误了项目进程,该开发文档都要没有时间来写了. 先说bug吧,在昨天已经实现了页面图标的展 ...

  4. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则 | Kayo's Melody

    最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mob ...

  5. MUI开发注意事项

    mui开发注意事项,有需要的朋友可以参考下. mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验:这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文:想了解mui更详细的 ...

  6. Unity3D开发注意事项

    最近给组里定Unity开发注意事项,参考了@陆泽西在群里分享的[前端开发规范],结合自己工作中的经验,整理一下,下面不少条款都是我们要求在开发中必须遵守的. 资源: 图片统一为png格式,纹理属性:T ...

  7. 跨平台移动APP开发进阶(一)mui开发注意事项

    mui开发注意事项 Mui HTML5开发框架 mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验:这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文:想了解mui更详细 ...

  8. Cobalt环境搭建及 Web开发注意事项

    一.在Linux系统上搭建Cobalt运行环境 Cobalt是一款开源轻量级HTML5/CSS/JS浏览器,旨在于用最少的CPU.GPU.RAM等资源消耗提供丰富的应用程序开发.为了使前端开发者验证自 ...

  9. web前端之html5开发中常用的开发工具

    正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果.正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发 ...

随机推荐

  1. 【MVC 4】8.SportsSore:管理

    作者:[美]Adam Freeman      来源:<精通ASP.NET MVC 4> 本文将继续构建 SportsStore 应用程序,为网站管理员提供一个管理产品分类的方法.本文将添 ...

  2. UESTC 884 方老师的专题讲座 --数位DP

    定义:cnt[L][K]表示长度为L,最高位为K的满足条件C的个数. 首先预处理出cnt数组,枚举当前长度最高位和小一个长度的最高位,如果相差大于2则前一个加上后一个的方法数. 然后给定n,计算[1, ...

  3. UVA 12723 Dudu, the Possum --数学期望

    题意不说了,概率和期望值要分开处理. 方法1:可以先算出到达每层的概率,然后再乘以每层的期望,每层的期望是固定的. 方法二:也可以从后往前直接推期望.为什么从后往前呢?因为第i层的时候,它可以跳到的层 ...

  4. Unity-WIKI 之 AnimationToPNG

    组件功能 把3D角色的动画录制成PNG一帧一帧输出,这是一个件多么美好的事! 可能遇到问题 有可能当你新建完脚本时会出现下面的错误: `System.IO.File' does not contain ...

  5. 如何使用AutoIT完成单机测试

    下面我们来介绍如何使用AutoIT完成单机程序的自动化测试.使用AutoIT完成桌面应用程序的自动化测试,最重要的是找到识别GUI对象的方法,然后调用AutoIT函数来操纵它或读取它的属性值,并与正确 ...

  6. 注解与反射 ---Spring与Mybatis等框架的实现原理

    Java中各大框架,无论是AOP 还是 IoC 其基本实现思路都是源自Java 运行时支撑的反射功能, 而反射最基本的一点就是 任何一个类 其在JVM环境中,都有一个对象的Class对象,这个对象提供 ...

  7. 转 异常处理汇总 ~ 修正果带着你的Net飞奔吧!

    异常处理汇总 ~ 修正果带着你的Net飞奔吧!   异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 异常处理汇总-开发工具  h ...

  8. 移动Web 开发中的一些前端知识收集汇总

    在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么 ...

  9. LUA 协程

    LUA协程和C#协程非常相似,功能与用法更强大.基础用法: coco = coroutine.create(function (a,b) print("resume args:". ...

  10. js计算两个日期相隔几小时几分钟?

        var dt1 = "2009-11-5 10:30"       var dt2 = "2009-11-8 9:20"     function ge ...