移动端开发

Archives

文件夹

lucky-select https://github.com/gaofeiyu/lucky-select.git 移动端的select解决方案,可级联(现在只有二级联动)。 组件参考自新浪的微招聘,致敬! 基本指令说明 单级指令 singleSelectorPopup 二级联动指令 doubleSelectorPopup 上面两个指令主要是生成下拉部分 参数 //初始化的值 title 标题 initData 初始化的值 data 下拉数据 getRightListData 二级联动通过该属性的方法过滤生成二级菜单,单级联动不存在该属性 这里的data为数组,包含两个必要键值 {id:1,name:”id对应的展示名称”} 方法 show(val) val为初始化的对象 hide() 隐藏 onConfirm() 确认 onCancel() 取消 selector单级指令 该指令是在singleSelectorPopup基础上封装的选择的部分,供使用者参考。 scope: {value: “=”, options: “=”, name: “@”, readonly:”@”, index:”=”}, template: “<span class=’selector’ ng-click=’showPopup();’>{{str}}</span>”, restrict: “EA”, 参数说明 value 显示在前台的值 options 下拉的数据 name 下拉标题 […]

固定盒子长宽比 通过设置高度为0 ; padding-bottom:%可以根据宽度设定盒子的比例 如果不知道上面的理论是什么,可以通过去传送门看看这个属性的详细说明。 % 定义基于父元素宽度的百分比下内边距。此值不会如预期地那样工作于所有的浏览器中。 显然有兼容性问题~不过触摸端我还没有看到不好用的所以,移动端开发可以尽量用。

我们通过event.preventDefault;来取消事件的默认操作,如果禁用触摸设备的全局滚动我们可以用: document.body.ontouchmove = function (event) { event.preventDefault(); } 不过winphone的手机不支持这个方法,可以用下面的方法加在css中兼容: -ms-touch-action: none; 如果想通过触发恢复全局滚动只要移除上面的事件就可以了,具体可以通过我之前的文章了《event.preventDefault和恢复元素默认事件》解下。

经过一些测试,小米3安卓4.4ROM回有一些不可预计的css和js不兼容问题。 可能是小米的开发在浏览器是做了一些优(wan)化(xiao)。 暂时看比较单行的问题是一个老版本swiper插件的拖拽有问题,更具体的还在测试中。   从用户的角度,碰到这种问题,影响了浏览,可以通过对浏览器设置->高级->浏览器标识的调整(应该只要不是默认就可以),来恢复正常浏览。 从开发者,用其他插件类库,或者干脆用自己写的东西,来规避这个问题。

问题写在前面。 有的时候我们要跟app进行通讯或者跳转,会用到设定好的URL Schemes去做跳转。 有的开发者可能习惯了驼峰式命名,所以把地址协议也设置成firstSecond://这样的形式。 以前应该是没什么问题,新版本的安卓会把协议强制转换为小写,那么如果你的脚本对大小写敏感的话就要注意这个问题了。   下面列举一下官方的更新说明:   支持蓝牙MAP Android现在支持消息访问协议(MAP)。因此,支持蓝牙功能的汽车可与您的设备交换消息。 支持Chromecast 借助Android设备和Chromecast,您可以在高清电视上尽情欣赏喜爱的精彩在线娱乐内容(例如来自Netflix、YouTube、Hulu Plus和Google Play的内容)。 Chrome网页视图 嵌入网页内容的应用现可使用Chrome快速、准确地呈现此类内容。 可选字幕 Android现在支持可选字幕和翻译字幕。要启用可选字幕,请转至“设置”>“辅助功能”,然后开启“字幕”。 内置设备管理功能 如果您丢失了设备,可以通过Android设备管理器找到该设备或清空设备数据。 经过重新设计的“下载”应用 “下载”应用经过重新设计,提供了新的排序选项、列表和网格视图,方便您管理下载的文件。 轻松切换主屏幕 如果您喜欢对设备进行个性化设置,并已安装一个或多个可供替换的主屏幕,则可以在“设置”>“主屏幕”中轻松切换。 经过重新设计的“电子邮件”应用 “电子邮件”应用经过全新设计,面貌焕然一新!现在,该应用不但提供文件夹嵌套、联系人照片等功能,还改善了邮件浏览体验。 全屏壁纸,支持预览 壁纸现在可延伸至通知栏和系统按钮区域。更换壁纸时,您可以先预览其效果再进行设置。* HDR+拍摄模式 Nexus 5提供HDR+拍摄模式,可自动快速连拍多张照片,并将这些照片合成一张,实现绝佳的单张效果。白天拍摄的照片鲜活生动、光影分明;夜间拍摄的照片轮廓清晰、噪点寥寥。* 红外线遥控 在搭载红外(IR)遥控器的设备上,Android现在支持应用对电视和其他附近设备进行远程控制。 “快捷设置”中的位置信息设置 通过“快捷设置”中的新选项,您可以从任何地方快速调整您的位置信息设置。 位置信息模式和监测 如果您想要节省电池电量,请转至“设置”>“位置信息”,然后在“准确度高”和“耗电量低”位置信息模式之间切换。您无需在GPS、WLAN和移动网络设置之间切换。要查看最近有哪些应用申请使用您的位置信息,请转至“设置”>“位置信息”。 音频播放更省电 搭载Android 4.4的Nexus 5极大地延长了您收听音乐的时间,音频播放时间最长可达60小时。* 在锁定屏幕上调整音乐和电影播放进度 您可以在锁定屏幕上跳至歌曲或视频的某个片段。只需长按播放或暂停按钮,然后选择所需时间点即可。 安全的应用沙盒 应用沙盒功能已通过Security-Enhanced Linux得以强化。 内置计步功能 在Nexus 5上使用健身应用(如Moves)时,手机就相当于一个计步器,可用来计算步数。Android 4.4和新硬件可让您以更省电的方式评估自己的运动量。 以全新方式支持碰触付款 Android 4.4采用了全新的开放式NFC支付架构,支持所有移动运营商,允许应用管理您云端或设备上的支付信息。现在,您可以使用Google电子钱包或其他应用,在超过一百万家商店中使用碰触付款功能。 改进触摸屏 结合改进后的软件和Nexus 5的最新硬件,Android现在能以前所未有的速度和准确度,响应您的触摸操作。*

刚接触手机的时候,前端工程师喜欢用click去处理点击/触摸事件。 渐渐地,通过体验和看过一些文章,我们知道手机上还有touch专用事件,于是我们开始专用touchstart或者touchend来处理触摸事件,然后我们就碰到了各种问题… Click的延迟问题 click从功能上讲问题不大,但是响应有延迟,传说300毫秒,其实根据机能不同会有更长时间的延迟。 据说一些安卓机用click会出现其他的问题,我没碰到过所以不细说了。 各种touch先天不足 touch响应快,但是你碰到屏幕就是一个touchstart事件,离开屏幕就是一个touchend事件,就算你去拖动屏幕也会执行触发这两个事件,产生的问题我们叫误点击。 解决响应时间和误点击的几个方案 首先我这里不谈jqueryMobile。 那么我知道的几个解决方案为: fastclick,https://github.com/ftlabs/fastclick; MBP.fastButton,https://github.com/h5bp/mobile-boilerplate zepto的tap和singleTap事件,http://zeptojs.com/ 上面几个方案都可以很好的解决响应和误点击问题。 那么我们进入正题——“连点”问题 什么是“连点”? 当你点击一个层,而这个层因为事件控制而隐藏了,这时候恰巧这个层下面的区域点击的同一个位置也有点击事件被触发了,那么就是“连点”了。 这个问题发生在弹出层的情况比较多。 上面提到的三个方案在新的手机里面都不太容易(总有特殊情况)出现“连点”问题,但是在老的安卓里面,比如我手上的三星Note中fastclick就会出现连点。 而其他方案表现就很好,所以从这个角度fastclick基本被淘汰了。 还有一种“连点”! 连点还有一种情况,就是你可能在事件里面写了个window.location.href跳转,你这个跳转非常快的完成了,然后又恰巧你跳转的页面在你点击的位置也有个点击事件/链接,那么这个事件/链接也会被触发。 这个是点击问题中最丧心病狂的~ 而且关键的是除了click和a标签本身,其他方案都无法避免这个问题。 所以请避免使用点击事件做跳转。 父子Dom的点击事件关系 如果我的一个大dom上有个点击事件,dom中的子dom也有个点击事件,那么点击子dom会执行谁的事件呢? 如果你用click和fastclick就都会执行,其他的方案是执行子dom的事件。 综上所述 如果你在项目中用了zepto,请优先用zepto的相关点击事件,来避免可能发生的问题。 当然了fastclick还有其他的响应功能,如果你需要的话可以在合适的时候去使用它。

很多pc端的页面仔想去编写wap端的页面,但是又因为对可能出现的问题有恐惧的心理而不敢出手? pc和wap的网站虽然有很多差异,但是我们完全不用产生距离感,只要掌握一些主要问题的解决方案,大胆动手去做就好了。 这里介绍一套《HTML5移动Web开发实践》对wap的一些处理方案。 先下载这套代码和示例 https://github.com/h5bp/mobile-boilerplate 说明里面有对这个demo的说明 Mobile browser optimizations. CSS normalizations and common bug fixes. The latest jQuery. A custom Modernizr build for feature detection and a polyfill for CSS Media Queries. Home page icon for Android, iOS, Nokia, Firefox Cross-browser viewport optimization for Android, iOS, Mobile IE, Nokia, and Blackberry. Open Web App support […]

咨询做安卓的同学,总得来说就两条: webView.getSettings().setBlockNetworkImage(true); webView.getSettings().setBlockNetworkLoads(true); 两条的功能就是阻塞对应类型的加载 如果要禁用就是true; 如果要启用就是false。 阻塞应该是为了加载速度快和安全着想。 实战中碰到的问题就是,wap端调用客户端的方法,客户端默认在方法回调结束后阻塞了加载,导致回调后再也无法请求ajax,使目标交互无法执行。 所以要根据实际情况选择是否阻塞。

虽然我不关心,但同事说腾讯是这么用的。 其实就是写了个正则字典穷举手机的可能。个人感觉适用性能覆盖90%以上的用户(只要“安全”浏览器不把userAgent改的太奇葩,或者用户不太奇葩)。 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ if(window.location.href.indexOf(“?mobile”)<0){ try{ if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){ //移动端 }else if(/iPad/i.test(navigator.userAgent)){ //这里对ipad做了处理 }else{ //移动端 } }catch(e){} } }else{ //pc端 } wp是个特殊的存在(IE),要怎么单独判断wp呢。 var ISWP = !!(navigator.userAgent.match(/Windows\sPhone/i)); 因为wp的特殊性海量的方法给你判断,具体情况再具体分析。

问题 如果给一个dom添加触摸事件以后,那这个dom里面子元素的触摸事件还可以触发么?这是最近项目中遇到的一个问题。 之后我做了个测试。   测试 测试环境:iphone4&ios6,lumia920&wp8,某安卓机 测试的点击方式:默认的click、MBP、Fastclick、Zepto&tap。 测试演示:http://gaofeiyu.com/demo/click/click.html 演示的基本逻辑是黄色块点击后会隐藏自己,黑色的底色块和红色块点击后会改变色块内的html并记录点击次数。 演示里面可以看出click和Fastclick的子元素和父元素都会触发,而MBP和tap事件只有当前dom会触发。   总结 在移动项目中还是Zepto和Fastclick混用的方案比较合适,无论点透还是这种逻辑混乱的交互都搞得通。 建议在项目中尽量用一种触摸事件触发方式,不然碰到问题改代码会很难看。我这边最开始用的是tap,之后发现各种问题搞得不得不做很多多余的操作,在优化后还是统一用了Fastclick,父子元素的问题,也只能换个方向去解决,毕竟这个问题本身的用户体验就不是很好。     我还顺便写了个连点的小样例在演示里面,有心的人可以分析一下。