转-手机浏览器-javascript-浅淡HTML5移动Web开发

http://select.yeeyan.org/view/213582/202991

http://wap.chinaz.com/?src=sc.chinaz.com/info/130410113358.htm

浅淡HTML5移动Web开发
2013-04-10标签:HTML5移动Web开发
说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发。但从这两种开发模式的特点来说,从它们诞生之日起就开始了不断的争论,孰好孰坏,本文不作探讨,只是简单罗列下本人开发遇到的问题和最终的解决方案。
说到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的。我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能正常显示的固定宽度居中显示,后者则采用百分比。关于这两者讨论的文章很多,有兴趣的自己查阅下,我今天要介绍的就是相信你已经听过的”响应式布局”,响应式布局意味着媒体查询,这个在css2就已经出现的东西随着html5、css3的到来又增添了新的生机。
响应式web设计并非新的技术,只不过将已有的开发技巧(弹性布局、弹性图片和媒体查询等)整合在了一起,并命了这个听起来很牛X的名字——响应式web设计。犹如当年的Ajax一样,将已有的技术重新组合发挥新的作用。
(1).媒体查询初探。媒体查询并非新出现的技术,如下:
其中就使用了媒体查询,通过 标签的media属性为样式表指定了设备类型,当然CSS3时代的媒体查询更加丰富。
发现了他们的区别吗?对,不只是针对设备进行适配,而且加了一个条件,就是当设备纵向放置的时候才匹配,咱们再看一个。
大家会发现我们又拓展了一个条件,对,就是当设备屏幕的宽度大于960px才会加载style.css样式文件。我们究竟有哪些特性是可以被探测到的呢?下面列了一部分供大家参考(参考自http://www.w3.org/html/ig/zh/wiki/CSS3媒体查询):
– width 视口宽度
– height 视口高度
– device-width 设备屏幕的宽度
– device-height 设备屏幕的高度
– orientation 检测屏幕处于横屏还是竖屏
– aspect-ratio 基于视口的宽高比例
– device-aspect-ratio 基于设备屏幕的宽高比
– color 颜色的位数,如min-color:32 匹配设备是否有32位或以上的颜色
– color-index 设备的颜色索引表中的颜色数
– monochrome 检测单色振缓冲区中每像素使用的位数。为非负数,如monochrome:3
– resolution 检测屏幕或打印机的分辨率,如min-resolution:300dpi(dpi后面会介绍),也可以是每厘米像素点的度量值,如min-resolution:120dpcm
– scan 扫描方式,值为progressive(逐行扫描)、interlace(隔行扫描)
– grid 检测输出设备是网格设备还是位图设备
创建媒体查询时,上述特性(scan和grid不行)都可以加上min和max前缀创建媒体查询的范围。除了link标签能够进行媒体查询,是不是还有其它的呢,答案是Yes 。html中的meta标签,此前我们常用的应该是这个
但是现在我们要说的不是这个,而是这个:
在多数ios和android设备的浏览器都支持viewport meta元素覆盖默认的画布缩放设置。在标签中插入meta标签,设置相应属性即可,如上代码,name=”viewport” content中width=device-width表示浏览器页面宽度等于设备宽度(同理可以设置高度,也可指定具体值),initial-scale=1表示页面不缩放保持,mininum-scale=1和maximum-scale=1表示允许用户最小缩小至原大小和扩大到原大小(实际就是不让缩放^^),user-scaleable=no 表示禁止缩放, target- densitydpi = high-dpi表示适配高分辨率的屏幕,还可以取值为dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi,后面的四个定性,第一个定量,即dpi_value是DPI值,device-dpi是使用设备原本的 dpi 作为目标 dp,不发生默认缩放,而后面的三个是指dpi取值在一定范围的表示。这里我们先介绍前文出现过的一个名词dpi,所表示的是每英寸所拥有的像素(pixel)数目,数值越高,即代表显示屏能够以越高的密度显示图像。当达到人眼的极限分辨率时,乔帮主给它取了一个很高端的名字——Retina。那么目前市面的手机分辨率是怎样的一个分布呢,ios大家都知道的,从iphone4时代开始就已经是Retina屏了,至于Android可以看下此前Google官方公布的数据:
从上面可以看出,高分屏和超分屏已经是主流了,具体的适配范围还是看各自的项目和定位吧。
讲了这么多,有人可能会疑惑为什么这些都不是用在CSS中的?别急,慢慢来,现在就介绍如何在样式中运用,按照上述屏幕分辨率的四种划分,我们可以看到基本可以舍弃ldpi了。
/* 中分辨率屏幕 */
/*高分辨率屏幕*/
/*超高分辨率屏幕(传说中的Retina屏)*/
上面就是在css中的用法,把我们需要的css代码包含在大括号中就能用了,是不是很方便的样子%>_<%。当然我们还可以用到之前提供的几个特性,如下:
针对视口宽度不大于768像素的情况加载大括号中的样式。
虽然我们可以把设备的分辨率可以分为这几类,但是屏幕的尺寸实在太多,如果针对每一种尺寸写一种样式,我觉得设计师和前端面不用干别的了,因为开发成本实在太大,而且没有必要,我们只需要针对绝大多数的设备结合媒体查询和弹性布局来调整,减少开发成本。
2.CSS3新增属性
现在移动端两大阵营ios和android都是基于webkit内核的,而webkit内核对CSS3的支持走在了前面,在这里我们可以抛开翔一样的ie家族,尽情享受多彩绚丽CSS3世界吧!
CSS3给我们带来了如:文字阴影(text-shadow)、盒子阴影(box-shadow)、圆角(border-radius)、背景渐变(background: linear-gradient(#000, #fff))、2D变换(transition)、动画(animation)等大家耳熟能详的常用属性外,还有如-webkit-mask、-webkit-text-stroke、-webkit-nbsp-mode、-webkit-tap-highlight-color、-webkit-box-reflect、-webkit-marquee、-webkit-box等webkit内核私有属性,至于这些属性其他浏览器支持程度,有兴趣的可以自己研究研究,这上面的每一个属性都有自己的使用场景,就看如何灵活运用。今天我不全部列出,仅简单介绍几个。
(1)、介绍的第一个就是display:-webkit-box,我们知道元素大致分为内联元素、块状元素和介于两者之间的元素,当然还有inline-table、table-cell等神马的,那么display: -webkit-box怎么用呢,什么举个应用场景,对于下图所示的情况,父元素被1、2、3均分,且2和1之间间隔10px,你会怎么做?
这时候我们可以试试新的display:-webkit-box,另外还有如下属性配合使用,
-webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit,其中默认值是inline-axis,即横向排列
-webkit-box-flex 子元素之间比例,仅作一个系数
-webkit-box-direction 子元素排列顺序 normal | reverse | inherit,其中默认值是normal
-webkit-box-flex-group 以组为单位的流体系数
-webkit-box-ordinal-group 以组为单位的子元素排列方向
-webkit-box-lines 子元素是否换行,类似word-wrap和word-break的作用
-webkit-box-align 子元素垂直方向的对其方式
-webkit-box-pack 子元素水平方向的对其方式
这些配合使用的属性我们全部默认即可
CSS:
HTML:
怎么理解上面的代码呢,父亲有一块地,要分给兄弟几个,除去老大和老二之间的分割线所占的那块,剩下的部分均分的分数由li的兄弟个数和box-flex的总数确定,现在一共三兄弟,每兄弟的box-flex都是1,所以就总分数=1*1+1*1+1*1=3。
如果代码稍作修改
那么现在老二的box-flex是2了,总分数就是1*1+1*2+1*1=4,其中老大老三各占一份,老二占两份,显示效果如下:
(2)、-webkit-text-size-adjust:none;我做项目的时候发现一个问题,就是当竖屏的屏的时候显示效果不错,但是当横屏的时候,字体会变大,无论你怎么设置字体大小都无效,后来才知道是text-size-adjust(https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust)在作怪。浏览器默认会根据当前屏幕和内容作调整,在webkit内核的浏览器中只需要-webkit-text-size-adjust:none就禁止自动调整,至于是否全局活局部使用看自己的项目需求。
如上图所示,很明显当手机由竖屏转向横屏的时候主题区域的文字自动变大,跟你自己设置的大小无关,当你设置了-webkit-text-size-adjust:none后横屏的效果是这样的
这样,字体的大小就有我们自己设置,是可控的。
(3)、字级单位。
我们常用的有px、pt、百分比、em等,很惭愧,我最近才知道有rem,而且是个相当不错的朋友。前面的几个单位大家都比较熟悉,不知道有没有和我一样小白的才知道rem的呢,我们就介绍一下这个新朋友,它是随着css3来到这个世界。
我们之前用em、百分比的时候遇到的问题就是计算,而且当嵌套的层级太多时就会非常难以把控,而用px则被固定死了,现在我们用rem完全不用担心这个问题,因为rem的参照对象只有根节点。我们只需设置根节点的大小,所有子节点都只需参照它来设计就可以,下面是px、em、百分比和pt的对比
根据上面的图表(红色部分为默认,当然不同的浏览器渲染默认值不一样,具体还需各位实测)可以看出,我们只需设置html根元素字体大小为75%,对应的px值就是12,这样我们可以很方便的设置页面的宽高和字体大小,当然单位是rem,这样参考对象才会永远是html而不是父元素,当需要变化的时候,只需改变html的大小其他的元素都会相应变化,方便极了。
3、HTML5新增标签。
在html5中新增量很多标签,加强连html标签的语义化,如
等等,这些标签都各自有自己大意义,不再仅仅是span和div,虽然html4中也有很多语义化的标签,但是不如html5丰富。除了这些新增的标签,还有一些此前就有的标签,但是类别新增,最具代表性的就是表单form,而本文要介绍的就是form。
以上除了type=text外,其他的都是新增的,如果浏览器支持这些属性的话,就会自动调用相应组件,如在移动设备中type=number/email/text时,浏览器会调用不同版面的键盘,这样加快用户的输入,体验也更美好,如下
如果是type=range则会出现这样的组件,供选择范围
如果是type=color则会出现颜色选择器
如果是type=date则出现日期选择器
如果是type=search,则在输入时候出现一个一键清除的按钮,点击输入的文字全部清除
另外,除了input的type新增量类别,还增加一些很实用的属性,如placeholder,我们知道,input中我们常常会默认一些文案,当用户输入的时候会自动清除,html5之前我们是靠javascript实现的,但是有了html5,我们可以轻松实现,只需要placeholder=”默认文案” 如下
当然新增的不只有placeholder,还有譬如可以关闭默认大小写的autocapitalize=”off”,有兴趣的童鞋可以研究研究。
4、选择符
选择符大致分为元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符,在PC端,我们用的最多的就是元素选择符、关系选择符和属性选择符如
div{……}、div.class{……}、div#id{……}、div span{……}、div[class=”classname”]{}
但是由于ie某些浏览器的原因,很多好用的选择符不能广泛使用,如ie6只支持a标签的伪类选择符,但是在移动端,我们就不用在意这些了,绝大多数选择符都已经可以使用了,如前文已经用到的
.item_list li:first-child{background: #f00}
.item_list li:nth-child(2){margin-left: 10px;background: #ff0;-webkit-box-flex:1;}
.item_list li:last-child{background: #c96}
伪类选择符和伪对象选择符有很多,灵活运用可以减少很多不必要的代码。如E:nth-child(n){ …… }、E:nth-of-type(n){ …… }、E:disabled{ …… }、E:empty{ …… }、E:first-letter/E::first-letter{ …… }、E:first-line/E::first-line{ …… }、E:before/E::before{ ……}、E:after/E::after{…… }、E::selection{ …… }等,这里不细说。
5、一些小的建议
(1)、如何禁止用户旋转设备
这里其实是想告诉你在浏览器里办不到,因为禁止开发者阻止浏览器的orientationchange事件。
(2)、禁用自动识别电话号码
在开发项目的时候,我们经常会用到一些数字或者就是电话号码,但是又不想系统自动识别让用户可以直接拨打,我们只需要在标签之间加入即可,但是有些特殊情况我们需要可以用户直接拨打,如
没关系,像这样010-52918772即可,系统会自动识别,用户点击即可选择拨号。
(3)盒子边框溢出
当我们指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。按照盒子模型,就会发现该元素的左右边框各1个像素会溢了,导致出现横向滚动条,这时候我们可以为其添加-webkit-box-sizing:border-box用来指定该盒子的大小包括边框的宽度。
(4)、ios数字颜色样式超过9位后失控
这个问题我不知道该怎么描述,就是在ios中,当数字超过9位数时,浏览器会给这个数字默认加上一个颜色,无论你设置什么颜色都无效。
(5)、iOS可禁止用户在新窗口打开页面
在项目开发中,有时我们需要某个链接在当前页面打开,这样需要禁止用户在新窗口打开页面,我们可以使用a标签的target=”_self”指定在当前页面打开,但是在iOS中长按链接一段时间后,系统会弹出一个对话框,用户可以通过点击”在新页面中打开”来在新窗口打开页面,这样我们指定的target属性就失效了,但是可以通过指定当前元素的-webkit-touch-callout属性为none来禁止iOS弹出这些按钮。
(6)、CSS3绘图和CSS3动画
在html5和css3的世界里,很多图片都是多余的,我们可以尽情发挥自己的想象,让CSS3替代不必要的图片不必要的JavaScript,另外做CSS3动画时最好将动画代码提取出来单独命名。

 

在本文中,我会深入研究iOS和Android设备提供的触摸事件API,探索一下可以构建哪些类型的应用,给出一些最佳做法,并论及一些使得可触控应用(touch-enabled application)的开发变得更加容易的有用技术。

针对多点触控浏览器进行的开发

译者:ElaineYe原文作者:Boris Smus 
发布:2011-06-27 17:34:31挑错 | 收藏本文
前言


诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏(capacitive touch-sensitive screen),以捕捉用户的手指所做的交互。随着移动网络的发展,其能够支持越来越复杂的应用,web开发者需要一种方法来处理这些事件。例如,几乎所有的快节奏游戏都需要玩家一次按下多个按钮,这种方式,在触摸屏情况下,意味着多点触摸。

Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范

在本文中,我会深入研究iOS和Android设备提供的触摸事件API,探索一下可以构建哪些类型的应用,给出一些最佳做法,并论及一些使得可触控应用(touch-enabled application)的开发变得更加容易的有用技术。

触摸事件


三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:

1. touchstart:手指放在一个DOM元素上。
2. touchmove:手指拖曳一个DOM元素。
3. touchend:手指从一个DOM元素上移开。

每个触摸事件都包括了三个触摸列表:

1. touches:当前位于屏幕上的所有手指的一个列表。
2. targetTouches:位于当前DOM元素上的手指的一个列表。
3. changedTouches:涉及当前事件的手指的一个列表。

例如,在一个touchend事件中,这就会是移开的手指。

这些列表由包含了触摸信息的对象组成:

1. identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。
2. target:DOM元素,是动作所针对的目标。
3. 客户/页面/屏幕坐标:动作在屏幕上发生的位置。
4. 半径坐标和 rotationAngle:画出大约相当于手指形状的椭圆形。

可触控应用


touchstart、touchmove和touchend事件提供了一组足够丰富的功能来支持几乎是任何类型的基于触摸的交互——其中包括常见的多点触摸手势,比如说捏缩放、旋转等待。

下面的这段代码让你使用单指触摸来四处拖曳一个DOM元素:

var obj = document.getElementById(\’id\’);
obj.addEventListener(\’touchmove\’, function(event) {
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX + \’px\’;
obj.style.top = touch.pageY + \’px\’;
}
}, false);

下面是一个示例,该例子显示了屏幕上当前所有的触点,它的作用就是用来感受一下设备的响应性。

\"\"

// 设置画布并通过ctx变量来暴露上下文
canvas.addEventListener(\’touchmove\’, function(event) {
for (var i = 0; i < event.touches.length; i++) {
var touch = event.touches[i];
ctx.beginPath();
ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
ctx.fill();
ctx.stroke();
}
}, false);

演示

到处都有着许多有意思的多点触摸演示,比如说这个由Paul Irish和其他人实现的基于画布的绘画演示

\"\"

还有Browser Ninja,一个技术演示,是一个使用了CSS3的转换、过渡和画布的Fruit Ninja克隆。

\"\"

最佳做法


阻止缩放

缺省的多点触摸设置不是特别的好用,因为你的滑动和手势往往与浏览器的行为有关联,比如说滚动和缩放。

要禁用缩放功能的话,使用下面的元标记设置你的视图区(viewport),这样其对于用户来说就是不可伸缩的了:

content=\”width=device-width, initial-scale=1.0, user-scalable=no\”>
看看这篇关于移动HTML 5的文章,了解更多关于视图区设置的信息。

阻止滚动

一些移动设备有缺省的touchmove行为,比如说经典的iOS overscroll效果,当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱,但要禁用它很容易。

document.body.addEventListener(\’touchmove\’, function(event) {
event.preventDefault();
}, false); 

细心渲染

如果你正在编写的多点触控应用涉及了复杂的多指手势的话,要小心地考虑如何响应触摸事件,因为一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出所有触点的例子,你可以在有触摸输入的时候就立刻进行绘制:

canvas.addEventListener(\’touchmove\’, function(event) {
renderTouches(event.touches);
},

不过这一技术并不是要随着屏幕上的手指个数的增多而扩充,替代做法是,可以跟踪所有的手指,然后在一个循环中做渲染,这样可获得更好的性能:

var touches = []
canvas.addEventListener(\’touchmove\’, function(event) {
touches = event.touches;
}, false);

// 设置一个每秒60帧的定时器
timer = setInterval(function() {
renderTouches(touches);
}, 15);

提示:setInterval不太适合于动画,因为它没有考虑到浏览器自己的渲染循环。现代的桌面浏览器提供了requestAnimationFrame这一函数,基于性能和电池工作时间原因,这是一个更好的选择。一但浏览器提供了对该函数的支持,那将是首选的处理事情的方式。

使用targetTouches和changedTouches

要记住的一点是,event.touches是与屏幕接触的所有手指的一个数组,而不仅是位于目标DOM元素上的那些。你可能会发现使用 event.targetTouches和event.changedTouches来代替event.touches更有用一些。

最后一点,因为你是在为移动设备做开发,因此你应该要留心移动的最佳做法,这些在Eric Bidelman的文章中有论及,以及要了解这一W3C文档

设备支持


遗憾的是,触摸事件的实现在完备性和质量方面的差别很大。我编写了一个诊断脚本来显示一些关于触摸API实现的基本信息,其中包括哪些事件是支持的,以及touchmove事件触发的解决方案。我在Nexus One和Nexus S硬件上测试了Android 2.3.3,在Xoom上测试了Android 3.0.1,以及在iPad和iPhone上测试了iOS 4.2。

简而言之,所有被测试的浏览器都支持touchstart、touchend和touchmove事件。

规范提供了额外的三个触摸事件,但被测试的浏览器没有支持它们:

1. touchenter:移动的手指进入一个DOM元素。
2. toucheleave:移动手指离开一个DOM元素。
3. touchcancel:触摸被中断(实现规范)。
被测试的浏览器还在每个触摸列表内部都提供了touches、targetTouches和changedTouches列表。不过,被测试的浏览器没有支持 radiusX、radiusY或是rotationAngle属性,这些属性指明触摸屏幕的手指的形状。在一次touchmove期间,事件大约一秒钟触发60次,所有的被测试设备都是这样。

Android 2.3.3 (Nexus)

Android的Gingerbread浏览器(在Nexus One和Nexus S上测试)不支持多点触摸,这是一个已知的问题

Android 3.0.1 (Xoom)

Xoom的浏览器对多点触摸有一个基本的支持,不过只能是在单个的DOM元素上起作用。浏览器不能正确响应同时发生在不同DOM元素上的两处触摸,换句话说,下面的代码会对两个同时发生的触摸的给出反应:

obj1.addEventListener(\’touchmove\’, function(event) {
for (var i = 0; i < event.targetTouches; i++) {
var touch = event.targetTouches[i];
console.log(\’touched \’ + touch.identifier);
}
}, false);

但下面的代码则不会:

var objs = [obj1, obj2];
for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
obj.addEventListener(\’touchmove\’, function(event) {
if (event.targetTouches.length == 1) {
console.log(\’touched \’ + event.targetTouches[0].identifier);
}
}, false);
}

iOS 4.x (iPad, iPhone)

iOS设备完全支持多点触摸,能够跟踪多个手指,并在浏览器中提供一个非常敏感的触摸体验。

开发者工具


在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入。

不得不在移动设备上进行的测试有可能会拉长你的开发周期,因为你所做的每项改变都需要提交代码到服务器上,接着再加载到设备上。然后,一旦运行后,对应用也就没有太多的调试了,因为平板电脑和智能手机都很缺乏web开发者所用的工具。

这个问题的一个解决方案是在开发机器上模拟触发事件。对于单点触摸,触摸事件可以基于鼠标事件来模拟。如果你有触摸输入设备的话,比如说现代的App MacBook,那么多点触摸也可以被模拟。

单点触摸事件

如果你想在桌面上模拟单点触摸事件的话,试一下Phantom Limb,该程序在网页上模拟触摸事件并提供一只巨手来引导。

另外还有Touchable这一jQuery插件,该插件跨平台地统一了触摸和鼠标事件。

多点触摸事件

为了能够让你的多点触摸web应用在你的浏览器或是多点触摸控板(比如说Apple MacBook或是MagicPad)上起作用,我创建了这一个MagicTouch.js填充工具,其捕捉来自触控板的触摸事件,然后把它们转换成标准兼容的触摸事件。

1. 下载npTuioClient NPAPI插件并把它安装到~/Library/Internet Plug-Ins/目录下。

2. 下载这一Mac MagicPad的TongSeng TUIO应用并启动这一服务器。

3. 下载MagicTouch.js这一javascript库来基于npTuioClient回调模拟规范兼容的触摸事件。

4. 以如下方式把magictouch.js脚本和npTuioClient插件包含到你的应用中:

< head>

< script src=\”/path/to/magictouch.js\” kesrc=\”/path/to/magictouch.js\”>< /script>
< /head>

< body>

< object id=\”tuio\” type=\”application/x-tuio\” style=\”width: 0px; height: 0px;\”>
Touch input plugin failed to load!
< /object>
< /body>

我只在Chrome 10上测试了这一方法,不过只要稍做调整它应该能够在其他的现代浏览器上工作。

如果你的计算机没有多点触摸输入的话,你可以使用其他的TUIO跟踪器,比如说reacTIVision来模拟触摸事件。欲了解更多信息,请参阅TUIO项目页面

需要注意的一点是,你的手势可以是和OS层面的多点触摸手势相同的。在OS X上,你可以通过进入System Preferences中的Trackpad偏好设定版面来配置系统范围的事件。

随着多点触摸功能逐渐得到跨移动浏览器的的广泛支持,我非常高兴地看到新的web应用充分利用了这一丰富的API。