快捷搜索:

金沙第一娱乐娱城官网

当前位置:金沙第一娱乐娱城官网 > 金沙第一娱乐娱城官网 > 金沙第一娱乐娱城官网一直都知道wap端点击相关

金沙第一娱乐娱城官网一直都知道wap端点击相关

来源:http://www.dlksamusic.com 作者:金沙第一娱乐娱城官网 时间:2020-05-07 08:12

最近都忙死了,好久都没更新博客了。今天还是想提下移动端的问题 :hover选择器。

最近一直在WAP端页面的开发,一直都知道wap端点击相关问题存在延迟。之前做的网页大部分使用a链接进行,一直未入此坑。最近做的一个WAP网站,各种点击,hover事件,如果使用PC端网页的做法,直接使用js click事件与css中的hover伪类,视觉效果与用户体验很差。

H5页面窗口自动调整到设备宽度,并禁止用户缩放页面

说到移动和PC端中的hover处理问题,已经碰到过很多次了,先前一直没去仔细的研究过,有时候忽略过去了。众所周知,现在项目都注重交互用户体验,譬如按钮之类的都加上hover效果。但是这个效果在PC端体验很好,如果页面需要做成响应式,那问题就来了,发现在移动端点击按钮后,会执行PC的hover效果,然后再跳转,返回的时候还是保持了hover效果。

click的坑:*存在延迟*

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

我们要的效果就是在PC和移动端都保持一样的效果。于是我想到了:actived选择器,发现在不同手机浏览器上效果不一样,有的有效果,有得却没,烦躁ing.....

移动端处理事件优先级别:

忽略将页面中的数字识别为电话号码

后来有一天无意中在美团上团购2张电影票,发现他们的处理方式很好。如果回去打开网站研究了一番,处理方法让我大吃一惊,一句代码搞定:

触摸事件 > 连续 > 点击事件touch > douchtouch > click
<meta name="format-detection" content="telephone=no" />

document.body.addEventListener('touchstart', function;

浏览器在触摸完毕后会检测连续触摸事件,判断是否需要执行放大缩小效果,最后才是click事件。点击延迟由此而生。

忽略Android平台中对邮箱地址的识别

太神奇了,其实这句代码也没干什么,只有在BODY上绑定了一个touchstart事件。在性能上没什么影响,可以采取。希望能帮到正在为此问题发愁的你,如你有好的方法也可以留言给我。

chrome浏览器下解决方法最简单粗暴:

<meta name="format-detection" content="email=no" />

在这里也想补充一下:在移动端中浏览器会有自带的一个点击高亮效果,可以通过给a标签或者body,html加如下代码:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari

-webkit-tap-highlight-color:transparent;

width=device-width, 设置网页宽度为设备宽度initial-scale=1, 初始缩放为1maximum-scale=1, 最大缩放为1user-scalable=no, 禁止缩放

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后,safari上已看不到效果 -->

但同样使用webkit内核的safri浏览器却不生效。

将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式

金沙第一娱乐娱城官网,IE也是有自己的解决方法的:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->
target: { -ms-touch-action: none; /* IE10 */ touch-action: none; /* IE11 */}/* 如果整个网页都不需要考虑放大缩小效果的话,直接附加在body上即可 */body { -ms-touch-action: none; /* IE10 */ touch-action: none; /* IE11 */}

金沙娱场app下载,viewport模板

其他浏览器只能依靠js代码来解决:

viewport模板——通用

document.getElementById.addEventListener('touchend', function(){ /* 点击事件回调函数 */ }, false);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
这里开始内容
</body>

</html>
viewport模板 – target-densitydpi=device-dpi,android 2.3.5以下版本不支持

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 -->
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
这里开始内容
</body>

</html>

hover:*:hover样式不一定生效生效*由于手机浏览器并没有鼠标指针事件,w3c对此没有明文规范,各个浏览器对于hover的处理不尽相同。有的浏览器:hover 会生效,但是当触摸移出元素后hover还是会生效,再次开始触摸点击会移除hover效果。有的浏览器只有在A连接元素上hover才会生效。当然会想到 :active 这个伪类,然而在绝大部分手机浏览器下,并没有什么卵用。直接不支持 ::active 伪类。

参考案例:http://action.weixin.qq.com/payact/readtemplate?t=mobile/2015/wxzfsht/index_tmpl

解决方法:虽然手机浏览器中没有鼠标指针,但是有Touch事件。

常见问题

css增加hover样式:

移动端如何定义字体font-family

.target:hover, .target.hover { /* hover样式 */ }
中文字体使用系统默认即可,英文用Helvetica

js添加hover

/* 移动端定义字体的代码 */

var target= document.getElementById;target.addEventListener(’touchstart’, function(){this.className = “hover”;}, false);target.addEventListener(’touchend’, function(){this.className = “”;}, false);
body{font-family:Helvetica;}

hover与click处理事件常常在一起使用,综合解决:

参考《移动端使用字体的思考》

css代码:

移动端字体单位font-size选择px还是rem

对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可

对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

rem配置参考:

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
 .target:hover, .target.hover { /* hover样式 */ }

移动端touch事件(区分webkit 和 winphone)
当用户手指放在移动设备在屏幕上滑动会触发的touch事件

js代码:

以下支持webkit

var hoverClass = 'hoverClass'; // hover样式var target = document.getElementById;target.addEventListener(’touchstart’, function(){ this.className = hoverClass ;}, false);target.addEventListener(’touchend’, function(){ this.className = ""; /* 点击事件回调函数 */ // ...}, false);
touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用
TouchEvent

touches:屏幕上所有手指的信息
targetTouches:手指在目标区域的手指信息
changedTouches:最近一次触发该事件的手指信息
touchend时,touches与targetTouches信息会被删除,changedTouches保存的最后一次的信息,最好用于计算手指信息

实际情况当然不会这么简单,扩展代码css代码:

参数信息(changedTouches[0])

.target:hover, .target.hover { /* hover样式 */ }

clientX、clientY在显示区的坐标

js代码

target:当前元素

(function() { var pFastTouch = function { if(!document.querySelectorAll) return; // 不支持html5元素查询 if(!settings || !settings.selector) return; // 未设置选择器 settings.callbacks = settings.callbacks || {}; var els = document.querySelectorAll(settings.selector), hoverClass = settings.hoverClass, callbacks = settings.callbacks; var startCb = null, moveCb = null, endCb = null; /** * 触摸开始 */ if(hoverClass || callbacks.start){ startCb = function{ var el = event.target; if(hoverClass){ var className = el.className; className = (className == (undefined || '')) ? hoverClass : (className + ' '+hoverClass); el.className = className; } if(callbacks.start) callbacks.start.call(null, el, event); } for(var i=0; i<els.length; i++){ els[i].addEventListener('touchstart', startCb, settings.bubble || false); } } /** * 触摸中 */ if(callbacks.move){ moveCb = function{ callbacks.move.call(null, event.target, event); } for(var i=0; i<els.length; i++){ els[i].addEventListener('touchmove', moveCb, settings.bubble || false); } } /** * 触摸结束 */ if(hoverClass || callbacks.end){ endCb = function{ el = event.target; if(hoverClass){ var reg = new RegExp'+hoverClass+'; el.className = el.className.replace; } if(callbacks.end) callbacks.end.call(null, el, event); } for(var i=0; i<els.length; i++){ els[i].addEventListener('touchend', endCb, settings.bubble || false); els[i].addEventListener('touchcancel', endCb, settings.bubble || false); } } var setDestory = function{ if el.removeEventListener('touchstart', startCb, false); if el.removeEventListener('touchmove', moveCb, false); if el.removeEventListener('touchend', endCb, false); if el.removeEventListener('touchcancel', endCb, false); } /** * 销毁 */ var destory = function(){ for(var i=0; i<els.length; i++) setDestory; } return { destory: destory }; } window.pFastCorres = function{ return new pFastTouch; }})()

参考:https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent

调用示例

以下支持winphone 8

var touch = pFastCorres({ selector: '元素选择器', // 与jQuery元素选择器使用方法一致 hoverClass: 'hover样式', // 可不填 bubble: false, // 是否吞噬触摸事件,默认为false // 回调, 如果没有可以不填写 callbacks: { start: function(el, event){}, move: function(el, event){}, end: function(el, event){} }});// 若需要销毁,调用销毁方法// touch.destory();
MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生:阻止页面滚动
MSPointerUp——当手指离开屏幕时触发
移动端click屏幕产生200-300 ms的延迟响应

移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。

上述小段代码即可解决大部分的点击与hover需求,并且代码库很小说白了原理就是使用touch代替进行处理,触摸开始的时候添加hover样式,触摸结束移除hover样式;完整代码下载:

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,比如你在手机上用浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态。

当然,如果只是单纯的需要解决延迟点击问题,网上已有成型的插件供使用fastclick 其原理是使用事件委托在document节点添加touch检测。不过代码库稍稍有点臃肿。

双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

如果使用了zepto.js,可以使用$.tap 方法进行click处理,缺点是存在点透问题,改写touch冒泡事件即可。

原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接<a href=”#”></a>,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后,浏览器会先Hold一段时间t,如果在t时间区间里用户未进行下一次点击,则浏览器会做单击跳转链接的处理,如果t时间里用户进行了第二次单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢?在IOS safari下,大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。

感谢阅读此份文稿如需引用,请注明出处关于作者请访问:

解决方案:

fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块,tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序

ontouchstart
ontouchmove
ontouchend
onclick
解决300ms延迟的问题,也可以通过绑定ontouchstart事件,加快对事件的响应

什么是Retina 显示屏,带来了什么问题
retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina显示屏中,像素点1个变为4个

在高清显示屏中的位图被放大,图片会变得模糊,因此移动端的视觉稿通常会设计为传统PC的2倍

那么,前端的应对方案是:

设计稿切出来的图片长宽保证为偶数,并使用backgroud-size把图片缩小为原来的1/2

//例如图片宽高为:200px*200px,那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值为原来的1/2,例如视觉稿40px的字体,使用样式的写法为20px

.css{font-size:20px}
参考《高清显示屏原理及设计方案》

ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

本文由金沙第一娱乐娱城官网发布于金沙第一娱乐娱城官网,转载请注明出处:金沙第一娱乐娱城官网一直都知道wap端点击相关

关键词: