快捷搜索:
来自 新京葡娱乐场网址 2019-10-14 11:23 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

手提式有线电话机端事件,5个广大响应式设计陷

5个常见响应式设计陷阱及解决方案

2015/09/18 · HTML5, JavaScript · 响应式

原文出处: 王海庆   

http://www.cnblogs.com/mq0036/p/3934821.html
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。
以下是四种touch事件

1. 引言

原文:Sitepoint的5 Responsive Design Pitfalls and How to Avoid Them
译言:希望能够对大家所有帮助。

touchstart:     //手指放到屏幕上时触发
touchmove:      //手指在屏幕上滑动式触发
touchend:    //手指离开屏幕时触发
touchcancel:     //系统取消touch事件的时候触发,这个好像比较少用

2. 正文

每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表

2.1 引入

想象这样的场景: 您刚刚创建了一个杰出的响应式设计,然后准备在移动设备中测试一下。在您意想不到的地方产生了一些问题,文字乱糟糟的,动画波涛汹涌,表单没有呈现您设计的样式。然后花费N多时间修复这些问题,您可能抓狂地把电脑扔出窗外砸中邻居家的猫。

好消息是,我准备在本篇文章里介绍这些可能令您抓狂的问题,并讲解相应的解决方案。主要包括以下五个问题:

  1. 意外的文字改变
  2. 非期望的表单样式
  3. 误导的仿真器错误
  4. 桌面端表现良好动画的移动端呈现问题
  5. 触摸事件(Touch Event)的坐标注册问题

好的,言归正传。

本文假设您了解响应式网页开发的基础知识,否则您可能需要进行一下提升(简明教程)。

touches:     //当前屏幕上所有手指的列表
targetTouches:      //当前dom元素上手指的列表,尽量使用这个代替touches
changedTouches:     //涉及当前事件的手指的列表,尽量使用这个代替touches

2.1 意外的文字改变

ios设备的旋转将破坏布局、改变页面中的文字大小,当元素(例如导航条、菜单等)设置为固定定位时经常产生类似的问题,只有刷新页面才可以修复问题。幸运的是,有一个方法可以防患于未然。

在您的css中添加如下代码

CSS

html { /* 防止横屏时的文字缩放 */ -webkit-text-size-adjust: 100%; }

1
2
3
4
html {
    /* 防止横屏时的文字缩放 */
    -webkit-text-size-adjust: 100%;
}

该代码设置横屏时文字的缩放为100%,从而防止意外的文字改变发生。

这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,主要属性如下:

2.2 非期望的表单样式

平板或移动设备经常调用默认样式搞糟您的表单样式,我们可以使用如下的css代码阻止表单的默认样式。

CSS

input[type=text], button, select, textarea{ -webkit-appearance: none; -moz-appearance: none; border-radius: 0px; }

1
2
3
4
5
input[type=text], button, select, textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0px;
}

您可以根据需要选择重置的表单,例如将 input[type=text] 改变为 input 会选择所有类型的input。

clientX / clientY:      //触摸点相对浏览器窗口的位置
pageX / pageY:       //触摸点相对于页面的位置
screenX  /  screenY:    //触摸点相对于屏幕的位置
identifier:        //touch对象的ID
target:       //当前的DOM元素

2.3 误导的仿真器错误(mulator Errors)

如果您使用基于浏览器的移动仿真器进行测试,有时会产生一些烦人的问题。在您代码没有问题的情况下抛出一个问题,令人纠结。

例如,有一次正在开发中的页面底部的导航条莫名其妙的消失了,正当我准备查找问题原因时,我发现Chrome模拟器的视窗底部被切掉一部分,当我在新tab中打开页面,然后切换移动视图刷新之后就解决了问题。

遇到类似的问题,最为重要的是,要保证您的代码没问题仅仅是模拟器的问题。您可以尝试隔离问题区域看看代码是否正常工作,然后在真正的移动设备上测试一下。

手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,要注意禁止缩放和滚动。
1.禁止缩放
通过meta元标签来设置。

2.4 桌面端表现良好动画的移动端呈现问题

如果您在移动设备上使用动画,请一定要尤其注意动画的性能问题。一般来说,浏览器能够有效的动画以下属性translate、scale、rotate和 opacity等,例如下面的案例。

transform: translate(15px, 40px); /* shift left 15px and down 40px */ transform: scale(2); /* scale to 2 times original size */ transform: rotate(30deg); /* rotate 30 degrees */ opacity: 0.5; /* set opacity at 0.5 */

1
2
3
4
transform: translate(15px, 40px); /* shift left 15px and down 40px */
transform: scale(2); /* scale to 2 times original size */
transform: rotate(30deg); /* rotate 30 degrees */
opacity: 0.5; /* set opacity at 0.5 */

这些属性动画性能良好的原因是,这些属性位于浏览器渲染器的顶层。您可以把一个网页看成一个餐桌,动画这些属性就类似于移动一个调羹,动画底层属性类似于移动整个餐桌布,您需要同时移动上面的所有覆盖物,所以更加费劲一些(性能就会差一点)。

您可以通过阅读这篇文章,了解动画性能的更多信息。

为了最大化的支持您的动画,您可能需要加浏览器前缀(verdor prefix),您也可以到Caniuse了解更多的兼容情况。

另外注意,盒阴影(box-shadow)有时会影响动画性能,所以强烈建议使用盒阴影时注意移动设备的测试。

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">```
**2.禁止滚动--很重要**
preventDefault是阻止默认行为,touch事件的默认行为就是滚动。

2.5 触摸事件(Touch Event)的坐标注册问题

触摸事件的坐标注册问题也比较微妙,因为坐标在不同设备中存储区域不同。一些设备(例如ios)的触摸坐标和单击坐标相同,而另一些(例如android)设备则不同。好消息是,在任何移动设备中都可以通过特定的触摸事件数据(touch event data)获取坐标。

对于触摸事件来说,使用e.touches[0].pageX而非e.pageX获取触摸点的x坐标,获取y坐标也是类似的道理。下面是一些可能实际应用的代码。

JavaScript

/* event */ document.onclick = function(e){ var x = e.pageX; // get x coordinate of click var y = e.pageY; // get y coordinate of click console.log('x = ' x ', y = ' y); // show coordinates in console } /* for touch event */ document.ontouchstart = function(e){ var x = e.touches[0].pageX; // get x coordinate of touch var y = e.touches[0].pageY; // get y coordinate of touch console.log('x = ' x ', y = ' y); // show coordinates in console }

1
2
3
4
5
6
7
8
9
10
11
12
/* event */
document.onclick = function(e){
    var x = e.pageX; // get x coordinate of click
    var y = e.pageY; // get y coordinate of click
    console.log('x = ' x ', y = ' y); // show coordinates in console
}
/* for touch event */
document.ontouchstart = function(e){
    var x = e.touches[0].pageX; // get x coordinate of touch
    var y = e.touches[0].pageY; // get y coordinate of touch
    console.log('x = ' x ', y = ' y); // show coordinates in console
}

大家不妨模拟器里测试下上面的代码。

event.preventDefault();

2.6 总结

本文罗列一些响应式网页开发中的一些常见陷阱,并指定了对应的解决方案,希望可以对您为您节省时间,少些麻烦。

欢迎通过评论讨论、指教。

2 赞 4 收藏 评论

图片 1

####3.demo

//touchstart事件
function touchSatrtFunc(e) {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = e.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
}
//touchmove事件
function touchMoveFunc(e) {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
var text = 'TouchMove事件触发:(' x ', ' y ')';
//判断滑动方向
if (x - startX != 0) {
//左右滑动
}
if (y - startY != 0) {
//上下滑动
}
}

####demo2 学习了!!!

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>移动端触摸滑动</title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content="移动端触摸滑动" />
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
<style>
*{margin:0;padding:0;}
li{list-style:none;}

.m-slider{width:600px;margin:50px 20px;overflow:hidden;}
.m-slider .cnt{position:relative;left:0;width:3000px;}
.m-slider .cnt li{float:left;width:600px;}
.m-slider .cnt img{display:block;width:100%;height:450px;}
.m-slider .cnt p{margin:20px 0;}
.m-slider .icons{text-align:center;color:#000;}
.m-slider .icons span{margin:0 5px;}
.m-slider .icons .curr{color:red;}
.f-anim{-webkit-transition:left .2s linear;}
</style>
</head>

<body>
<div class="m-slider">
<ul class="cnt" id="slider">
<li>

图片 2

<p>20140813镜面的世界,终究只是倒影。看得到你的身影,却触摸不到你的未来</p>
</li>
<li>

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:手提式有线电话机端事件,5个广大响应式设计陷

关键词: