移动web知识
1、像素知识
px: css pixels，逻辑像素，浏览器使用的抽象单位
dp,pt:device independent pixels ，设备无关像素
dpr:devicePixelRatio 设备像素缩放比
计算公司：1px=(dpr)*dpr*dp
2、Viewport
手机浏览器默认为我们做了两件事。
一：页面渲染在一个980px(iso)的Viewport。
二：缩放
是有 visual Viewport 与 layout viewport.
最佳meta设置如下：
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
window.innerWidth/document.body.clientWidth=缩放比
【布局Viewport】=【设备宽度】=【度量Viewport】
3、Tap基础事件
自定义Tap事件原理：
在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置（或允许移动一个非常小的位移值），
且事件间隔较短（一般认为是200ms）,且过程中未触发过touchmove，即可认为触发了手持设备的"click",一般称为"tap"。
Tap透传Bug
解决方案：
1、使用缓动动画，过渡300ms延迟。
2、中间层dom元素的加入，让中间层接受这个“穿透”事件，稍后隐藏。
3、上下都使用"tap"事件。
四、Touch 基础事件
touchstart、touchmove、touchend、touchcancel(系统取消touch时触发）。
Bug：
Android只会触发一次touchstart,一次touchmove,touchend不触发。
在 touchmove中加入：event.preventDefault(),但会导致默认行为不发生，比如scroll。
触摸板上下左右滑动事例：
<style>
.touchpad{
width: %;
height: 200px;
font-size: 40px;
text-align: center;
line-height: 200px;
background: rgba(,,,0.5);
position: relative;
color: #ddd;
} .ball{
display: none;
position: absolute;
width: 25px;
height: 25px;
border-radius: 15px;
background-color: #7AE6FF;
top: ;
left: ;
}
p{
height: 30px;
} </style>
</head>
<body> <p id="desc"></p>
<div id="touchPad" class="touchpad">触摸板</div>
<div id="ball" class="ball"></div> <script src="../js/zepto.js"></script>
<script type="text/javascript">
var touchpad = document.querySelector('#touchPad'),
ball = document.querySelector('#ball'),
desc = document.querySelector('#desc'); //获取touch的点(兼容mouse事件)
var getTouchPos = function(e){
var touches = e.touches;
if(touches && touches[]) {
return { x : touches[].clientX ,
y : touches[].clientY };
}
return { x : e.clientX , y: e.clientY };
} //计算两点之间距离
var getDist = function(p1 , p2){
if(!p1 || !p2) return ;
return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
}
//计算两点之间所成角度
var getAngle = function(p1 , p2){
var r = Math.atan2(p2.y - p1.y, p2.x - p1.x);
var a = r * / Math.PI;
return a;
};
//获取swipe的方向
var getSwipeDirection = function(p2,p1){
var dx = p2.x - p1.x;
var dy = -p2.y + p1.y;
var angle = Math.atan2(dy , dx) * / Math.PI; if(angle < && angle > -) return "right";
if(angle >= && angle < ) return "top";
if(angle >= || angle < -) return "left";
if(angle >= - && angle <= -) return "bottom"; } var startEvtHandler = function(e){
var pos = getTouchPos(e);
ball.style.left = pos.x + 'px';
ball.style.top = pos.y + 'px';
ball.style.display = 'block'; var touches = e.touches;
if( !touches || touches.length == ){ //touches为空，代表鼠标点击
point_start = getTouchPos(e);
time_start = Date.now();
}
} var moveEvtHandler = function(e){
var pos = getTouchPos(e);
ball.style.left = pos.x + 'px';
ball.style.top = pos.y + 'px'; point_end = getTouchPos(e);
e.preventDefault();
} //touchend的touches和targetTouches没有对象，只有changeTouches才有
var endEvtHandler = function(e){
ball.style.display = 'none'; var time_end = Date.now(); //距离和时间都符合
if(getDist(point_start,point_end) > SWIPE_DISTANCE && time_start- time_end < SWIPE_TIME){ var dir = getSwipeDirection(point_end,point_start);
touchPad.innerHTML = 'swipe'+dir;
}
} var SWIPE_DISTANCE = ; //移动30px之后才认为swipe事件
var SWIPE_TIME = ; //swipe最大经历时间
var point_start,
point_end,
time_start,
time_end; //判断是PC或者移动设备
var startEvt, moveEvt, endEvt;
if("ontouchstart" in window){
startEvt="touchstart";
moveEvt="touchmove";
endEvt="touchend";
}else{
startEvt="mousedown";
moveEvt="mousemove";
endEvt="mouseup";
} touchpad.addEventListener(startEvt, startEvtHandler);
touchpad.addEventListener(moveEvt, moveEvtHandler);
touchpad.addEventListener(endEvt, endEvtHandler); </script> </body>
移动web知识的更多相关文章
- Java Web知识梳理
今天给内部做了个培训,貌似搞错了对象,不该对新人讲这么原理性的东西. anyway,还是放上来吧,不知道有没有人能理清其中的逻辑 ^ _ ^ 问题:为什么要用tomcattomcat: servlet ...
- Web知识简易介绍及HTTP知识总结
一.软件系统体系结构: 常见软件系统体系结构B/S.C/S C/S结构即客户端/服务器(Client/Server),例如QQ: 缺点:软件更新是需要同时更新客户端和服务器端两端,比较麻烦 优点:安全 ...
- web知识—协议
web使用超文本传输协议(HTTP,HyperText Transfer Protocol)进行通信.http在1990年左右出现,现在有0.9/1.0/1.1三个版本.在早期的互联网中的一些协议只能 ...
- 前端(web)知识-html
前端由三部分组成: HTML(标签)--CSS(美化,修饰)--JS(执行指令) HTML(超文本标记语言,Hypertext Markup Language):是一种用于创建网页的标记语言. 本质上 ...
- 02 CTF WEB 知识梳理
1. 工具集 基础工具 Burpsuit, Python, FireFox(Hackbar, FoxyProxy, User-Agent Swither .etc) Burpsuit 代理工具,攻击w ...
- Web知识总结
一)window.location.href和window.location.replace的区别 1.window.location.href=“url”:改变url地址: 2.window.loc ...
- 开始逐步补充下相关Web知识，很多年没搞了....
<script type="text/javascript"> $(function(){ ShowProduct(); $("#ShowUserInfo&q ...
- web知识清单
声名随笔中的实例链接到另一个博客是我本人的另一个博客号 模块一:HTML 1.html是什么: hyperText markup language超文本标记语言 超文本:比文本更丰富的内容 所有的浏览 ...
- 1 Web 知识基础
一.什么是跨域访问举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请求 ...
随机推荐
- eclipse 构造 C++ 11 -- ubuntu 12.04
设备g++ 4.8 sudo apt-get install python-software-properties sudo add-apt-repository ppa:ubuntu-toolcha ...
- ocp11g培训内部教材_052课堂笔记(042)_体系架构
OCP 052 课堂笔记 目录 第一部分: Oracle体系架构... 4 第一章:实例与数据库... 4 1.Oracle 网络架构及应用环境... 4 2.Oracle 体系结构... 4 3. ...
- 浅谈JavaScript中继承的实现
谈到js中的面向对象编程,都有一个共同点,选择原型属性还是构造函数,两者各有利弊,而就片面的从js的对象创建以及继承的实现两个方面来说,官方所推荐的是两个相结合,各尽其责,各取其长,在前面的例子中,我 ...
- Hibernate_10_继承的例子_单表
只是建一个表,所有属性都包括在此表.使用discriminator 到父和子类之间的区别. 1)父类(Article): public class Article { private Integer ...
- （转）javabean操作文件正确，但是Jsp调用javabean时文件路径出错问题解决之JavaBean访问本地文件实现路径无关实现方法
在JSP中,页面链接是使用web路径的,但如果JavaBean要访问本地文件读取配置信息的话,是需要文件的本地路径的.如果你在写 Bean的时候直接将本地路径写进去,那网站的路径就不能变化,丧 ...
- 浅谈 js 字符串 trim 方法之正则篇
原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格 等 ...
- java中文件的相对路径以及jar中文件的读取
Java中File类的构造函数需要我们传入一个pathname,当我们传入以"/"开头的pathname表示绝对路径,其他均表示相对路径. 一:绝对路径名:是完整的路径名,不需要任 ...
- [CLR via C#]5.3 值类型的装箱和拆箱
原文:[CLR via C#]5.3 值类型的装箱和拆箱 在CLR中为了将一个值类型转换成一个引用类型,要使用一个名为装箱的机制. 下面总结了对值类型的一个实例进行装箱操作时内部发生的事: 1)在托管 ...
- MVC验证03-自定义验证规则、禁止输入某些值
原文:MVC验证03-自定义验证规则.禁止输入某些值 本文继续体验自定义验证规则,需求是禁止输入某些值.本文与前2篇相关,请参考:MVC验证01-基础.远程验证 MVC验证02-自定义验证规则.邮 ...
- HDU 1484 Basic wall maze (dfs + 记忆)
Basic wall maze Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...