伪类 :active 生效
要CSS伪类:active生效,只需要给document绑定touchstart或touchend事件
<style>
a {
color: #000;
}
a:active {
color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
document.addEventListener('touchstart',function(){},false);
</script>
消除transition闪屏
两个方法
-webkit-transform-style: preserve-3d;
/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-backface-visibility:?hidden;
/*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
消除ie10里面的那个叉号
http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx>
input:-ms-clear{display:none;}
关于ios与os端字体的优化(横竖屏会出现字体加粗不一致等)
ios浏览器横屏时会重置字体大小,设置 text-size-adjust 为 none 可以解决ios上的问题,但桌面版safari的字体缩放功能会失效,因此最佳方案是将 text-size-adjust 为 100% 。
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
js事件
click 事件普遍 300ms 的延迟 在手机上绑定click 事件,会使得操作有300ms 的延迟,体验并不是很好。 开发者大多数会使用封装的 tap 事件来代替click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成
ios点击会慢300ms
https://developers.google.com/mobile/articles/fast_buttons?hl=de-DEhttp:///questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari
使用css3动画的时尽量利用3D加速,从而使得动画变得流畅。动画过程中的动画闪白可以通过backface-visibility 隐藏。
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
ie10的特殊鼠标事件
http://www./blog/blog_detail_73.html
不让android识别邮箱
<meta content="email=no" name="format-detection" />
禁止ios弹出各种操作窗口
-webkit-touch-callout:none
禁止用户选中文字
动画效果中,使用translate比使用定位性能高
http:///2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
拿到滚动条
window.scrollY
window.scrollX
比如要绑定一个touchmove的事件,正常的情况下类似这样(来自呼吸二氧化碳)
$('div').on('touchmove', function(){
//.….code
});
而如果中间的code需要处理的东西多的话,fps就会下降影响程序顺滑度,而如果改成这样
$('div').on('touchmove', function(){
setTimeout(function(){
//.….code
},0);
});
把代码放在setTimeout中,会发现程序变快.
关于ios系统中,webapp启动图片在不同设备上的适应性设置
http:///questions/4687698/mulitple-apple-touch-startup-image-resolutions-for-ios-web-app-esp-for-ipad/10011893#10011893
关于ios系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格
可以通过正则去掉
this.value = this.value.replace(/\u2006/g, '');
关于android webview中,input元素输入时出现的怪异情况
外边框多一个红色什么的边框
Android web视图,至少在HTC EVO和三星的Galaxy Nexus中,文本输入框在输入时表现的就像占位符。情况为一个类似水印的东西在用户输入区域,一旦用户开始输入便会消失(见图片)。 在android的默认样式下当输入框获得焦点后,若存在一个绝对定位或者fixed的元素,布局会被破坏,其他元素与系统输入字段会发生重叠(如搜索图标将消失为搜索字段),可以观察到布局与原始输入字段有偏差(见截图)。 这是一个相当复杂的问题,以下简单布局可以重现这个问题:
<label for="phone">Phone: *</label>
<input type="tel" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />
解决方法
-webkit-user-modify: read-write-plaintext-only
详细参考http://www./2012/android-label-text-appears-in-input-field-as-a-placeholder/ 注意,该属性会导致中文不能输入词组,只能单个字。
JS动态生成的select下拉菜单在Android2.x版本的默认浏览器里不起作用
解决方法删除了overflow-x:hidden; 然后在JS生成下来菜单之后focus聚焦,这两步操作之后解决了问题。(来自岛都-小Qi)
HTML5标签的使用
在开始编写webapp时,哥建议前端工程师使用HTML5,而放弃HTML4,因为html5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验,可以减少开发者很多的工作量,当然了你决定使用Html5前,一定要对此非常熟悉,要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签,定义导航条或选项卡可以直接使用nav标签等等。
放弃CSS float属性
在项目开发过程中可以会遇到内容排列排列显示的布局(见下图),假如你遇见这样的视觉稿,哥建议你放弃float,可以直接使用display:block;
利用CSS3边框背景属性
这个按钮有圆角效果,有内发光效果还有高光效果,这样的按钮使用CSS3写是无法写出来的,当然圆角可以使用CSS3来写,但高光和内发光却无法使用CSS3编写, 这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。
-webkit-border-image就个很复杂的样式属性。
块级化a标签
请保证将每条数据都放在一个a标签中,为何这样做?因为在触控手机上,为提升用户体验,尽可能的保证用户的可点击区域较大。
自适应布局模式
在编写CSS时,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。为达到适配各种手持设备,我建议前端工程师使用自适应布局模式(支付宝采用了自适应布局模式),因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示,你无需再次考虑设备的分辨率。
学会使用webkit-box
上一节,我们说过自适应布局模式,有些同学可能会问:如何在移动设备上做到完全自适应呢?很感谢webkit为display属性提供了一个webkit-box的值,它可以帮助前端工程师做到盒子模型灵活控制。
如何去除Android平台中对邮箱地址的识别
看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的,但在Android平台,它会自动检测邮件地址,当用户touch到这个邮件地址时,Android会弹出一个框提示用户发送邮件,如果你不想Android自动识别页面中的邮件地址,你不妨加上这样一句meta标签在head中
<meta content="email=no" name="format-detection" />
如何去除iOS和Android中的输入URL的控件条
你的老板或者PD或者交互设计师可能会要求你:能否让我们的webapp更加像nativeapp,我不想让用户看见那个输入url的控件条? 答案是可以做到的。我们可以利用一句简单的JavaScript代码来实现这个效果
setTimeout(scrollTo,0,0,0);
请注意,这句代码必须放在window.onload里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。
如何禁止用户旋转设备
我曾经也想禁止用户旋转设备,也想实现像某些客户端那样:只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你:别想了!在移动版的webkit中做不到!
至少Apple webapp API已经说到了:我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的orientationchange事件,看来苹果公司的出发点是正确的,苹果确实不是一般的苹果。
iOS已经禁止开发者阻止orientationchange事件,那Android呢?对不起,我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件,但是在Android平台,确实也是阻止不了的。
如何检测用户是通过主屏启动你的webapp
看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能,按下iphoneipodipod touch底部工具中的小加号,或者ipad顶部左侧的小加号,就可以将当前的页面添加到设备的主屏,在设备的主屏会自动增加一个当前页面的启动图标,点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条,这样你的webapp就更加像是nativeapp了,还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时,navigator.standalone为false,从主屏启动webapp时,navigator.standalone为true, 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。
在Android中从来没有添加到主屏这回事!
如何关闭iOS中键盘自动大写
我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
iOS中如何彻底禁止用户在新窗口打开页面
有时我们可能需要禁止用户在新窗口打开页面,我们可以使用a标签的target=”_self“来指定用户在新窗口打开,或者target属性保持空,但是你会发现iOS的用户在这个链接的上方长按3秒钟后,iOS会弹出一个列表按钮,用户通过这些按钮仍然可以在新窗口打开页面,这样的话,开发者指定的target属性就失效了,但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。
iOS中如何禁止用户保存图片\复制图片
我们在第13条技巧中提到元素的-webkit-touch-callout属性,同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮,这样用户就无法保存\复制你的图片了。
iOS中如何禁止用户选中文字
我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。
如何解决盒子边框溢出
当你指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。
如何解决Android 2.0以下平台中圆角的问题
如果大家够细心的话,在做wap站点开发时,大家应该会发现android 2.0以下的平台中问题特别的多,比如说边框圆角这个问题吧。 在对一个元素定义圆角时,为完全兼容android 2.0以下的平台,我们必须要按照以下技巧来定义边框圆角:
1\-webkit这个前缀必须要加上(在iOS中,你可以不加,但android中一定要加);
2\如果对针对边框做样式定义,比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。
3\假如我们有这样的视觉元素,左上角和右上角是圆角时,我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角,-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角,还有记住!-webkit这个前缀一定要加上!
如何解决android平台中页面无法自适应
虽然你的html和css都是完全自适应的,但有一天如果你发现你的页面在android中显示的并不是自适应的时候,首先请你确认你的head标签中是否包含以下meta标签:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />
如果有的话,那请你再仔细的看清楚有没有这个属性的值width=device-width,如果没有请立即加上吧!
如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式
新的iOS系统也就是4.3版本,升级后对safari造成了一个bug:即使你添加了如下的meta标签,safari仍然会对页面中的5位连续的数字进行自动识别,并且将其重新渲染样式,也就是说你的css对该标签是无效的。
<meta name="format-detection" content="telphone=no" />
我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签,我们都做了如下改写:
<button class="t-balance"style="background:none;padding:0;border:0;">95009.00</button>元
参考http:///questions/4697908/html-select-control-disabled-in-android-webview-in-emulator
iOS5 Web调试工具iWebinspector iWebinpector screenshot
html5与css3技术应用评估
各种奇妙的hack
几乎所有设备的屏幕尺寸与像素密度表
http://en./wiki/List_of_displays_by_pixel_density
ios端移动设备参数速查
http:///blog/the-ios-design-cheat-sheet-volume-2/
浏览器兼容表
http://www./compatibility.html
移动设备查询器
https:///device-data/devices
移动设备适配库
viewport与设备尺寸在线检测器
https:///device-data/devices
html5移动端兼容性速查
在线转换字体
http://www./tools/webfont-generator
css3选择器测试
http://tools./selectors-test/test.html
兼容性速查表
浏览器的一些独特参数
各种各样的媒体查询收集
css3动画在线制作器
http://ecd.tencent.com/css3/tools.html
css3渐变在线制作器
http://www./gradient-editor/
赛贝尔曲线在线制作器 http:///#.17,.67,.83,.67flexbox在线制作器 http:///flexyboxes/ CSS3各种渲染效果在线工具(IE出品)
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/see-also.htm
resize添加到收藏夹后,可直接在浏览器中出现各种分辨率的选择工具来查看不同分辨率下的页面效果
http://lab./viewport-resizer/
移动端手势表
http://ww1.sinaimg.cn/bmiddle/c2c57f68jw1e4fh7dmw12j20fi2w6qe1.jpg
webkit独有的样式分析
http://ued./blog/wp-content/webkitcss/
十一、moble web前端开发(事件处理)
通过前两篇文章,我们已经了解了mobile上的基本事件模型,这篇文章我们主要讲一下Tangram Mobile的事件。Tangram Mobile 究竟包含那些事件呢,为什么要开发这些事件?平时我们在开发的时候可能会需要一些较复杂的事件,例如双击屏幕事件、长按事件或者 滑动事件,这些事件并不是标准事件,浏览器并没有响应的实现,所以我们需要自己来实现这些事件。
on和un
Tangram Mobile里的事件,例如下面的tap、dbtap、taphold、swipe、pinch等事件都是组合事件, 那什么是组合事件呢,就是说每个事件都是通过多个事件模型组合而成的,例如tap事件是通过使用ontouchstart、 ontouchmove和ontouchend事件来完成的,这样我们需要通过特殊的on函数和un函数来添加事件监听器和移除 事件监听器,例如
baidu.event.on(element, 'tap', fn); baidu.event.un(element, 'tap', fn);
on和un函数除了可以处理Tangram Mobile的自定义事件,还可以处理标准事件,我们可以这样用, baidu.event.on(element, 'touchstart', fn); baidu.event.un(element, 'touchstart', fn);
tap事件
旋转屏幕事件, 如果是iphone,我们可以直接使用orientationchange事件,但是anroid有些低版本 并不支持orientationchange,我们可以使用onrisize事件,android有些版本旋转后得不到准确的 innerHeight和innerWidth,我们可以通过setTimeout修复它,使用turn事件可以不用考虑以上问题, 我们可以通过这种方式来添加turn事件,
baidu.event.on(element, 'turn', function(e){ //e.orientation 当前翻转状态 });
兼容PC浏览器(Safari)
Tangram Mobile的事件兼容PC(safari)浏览器,兼容pc浏览器有什么好处呢?这里主要是考虑在mobile下 调试比较麻烦,目前的调试方法都不太方便,那如果兼容pc后,大家就可以使用pc上的调试工具来调试。那么 是如何做到兼容pc的呢,主要是把touch事件适配成mouse事件,
getCompat = function(elem, evtName) { var _compat = { "touchstart": { name: 'mousedown', element: elem }, "touchmove": { name: 'mousemove', element: document }, "touchend": { name: 'mouseup', element: elem } }, _event = { name: evtName, element: elem }; _event = (baidu.browser.isSupportTouch ? _event : _compat[evtName]) || _event; return _event; };
在on和un方法里面,会调用这个getCompat方法,来适配相应的事件和对象。
fire、fireMouseEvent、fireCustomEvent
fire方法可以触发各种类型的事件,包括KeyEvents、MouseEvents、HTMLEvents、UIEvents, fireMouseEvent主要是触发MouseEvents(包括touch事件),fireCustomEvent可以触发组合 事件,例如tap、dbtap、taphold、turn等事件。