关键词:
移动端前端开发注意点
第一次接触移动端开发,发现web端和移动端的差别还是很大的,我主要记录移动端的一些内容:
- 移动端与web端在网页设计与交互方面的差别
- 移动端注意点
- 一些小技巧
- 移动端的一些问题及解决方法
移动端与web端在网页设计与交互方面的差别
纯粹是个人看法。
在web端是尽可能地展示丰富的功能,并且较为复杂,一个页面可以包含很多的内容。当然在交互方面也是相对复杂些,一般不是直接把“下一步”放在用户面前,而是让用户自己去找。
而移动端设计应以简约为主,一个页面可能只有一个功能,并且操作起来一定要便捷。代码量不能太大,不然加载起来速度会比较慢。
移动端注意点
推荐几篇博文
在开始移动端的开发前,我先搜罗了别人写的博客,感觉有几篇文章还是不错的,分享出来给大家看看。
手机/移动前端开发需要注意的20个要点
“移动端”宴席知多少
移动web前端开发时注意事项
浏览器兼容问题
组长的要求还是比较严格的,希望移动端,web端都能兼容。于是我真的做了非常多的尝试。
由于移动端的浏览器大多数都是基于webkit内核的,因此对css3和html5的支持都比较好。所以大家可以放心的用了。这里推荐一个网站,可以验证兼容性的,感觉很好用:can I use.
移动端的特殊设计
移动端的设计都遵循着一些规则,比如,一般app的底部导航栏的高度都跟微信公众平台的底部菜单栏高度一致,为45px。
一般提交按钮或者其他标签与屏幕的边距一致,并且不随屏幕大小的变化而变化。
因为手机的配置不够高,所以尽量减少代码量,尤其是css,简约的设计加流畅的速度,一举两得。
一些小技巧
运用display:flex
弹性盒模型在布局上是非常灵活、便捷的,而且大大减少了代码量。
在web端上flexbox支持IE10+,safari6.1+,支持chrome,opera以及firefox,记得加前缀。
关于flexbox的相关知识可以查看flex语法篇、详解弹性盒模型。
之前我发现display:flex在微信浏览器和qq浏览器不兼容。微信浏览器用的是qq浏览器的内核,支持旧版的弹性盒模型。可以使用dispaly:box,当然前面要加-webkit-和-moz-的前缀。关于旧版的请见文章:旧版弹性盒模型。
box-sizing的妙用
box-sizing真是救世主般的存在。
有时候明明设置了宽度、高度,可突然发现后面需要加padding、border了,可是我想保持总的宽度和高度怎么办?这个时候box-sizing就可以发挥妙用了。box-sizing:border-box,这下padding和border都可以被算到width里了。如果还想按照原来的,那就设置为content-box就行了。
单位
一般web端使用px,但移动端一般多会采用em和rem,让单位成为一个不是固定数值的而是一个比例。
这方面可以多看看文章。
图片
不用换的作为背景的图片那就直接用background:url();另外还可以设置是否repeat,以及background-size和background-position等。
但是要换的图片一定不能放在css里面,不然就改不了了。
touch事件
可以直接参考jquery mobile。
在js中其实就是这几个事件而已:
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发,这个好像比较少用
每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表,尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表,尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,主要属性如下:
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素
这里引用了别人写的,加个链接:JS移动客户端–触屏滑动事件。
但是在touch事件里也发现了一些问题。
移动端的一些问题及解决方法
jquery mobile的swipe事件在安卓的微信浏览器及原生浏览器里不敏感
这是个很严重的问题,意味着用户体验会非常不好。因为安卓机的优化不好,导致了触摸不灵敏。
经测试,在安卓的chrome浏览器里完美支持,在原生及微信浏览器里经常滑不出来。
解决方法:1.采取硬件加速。css的3D动画会使GPU开启强制渲染,所以我们可以采取假3D方法对一个元素进行操作。
可以写成:
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/* Other transform properties here */
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
在 Chrome and Safari中,当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果,下面的代码可以修复此情况:
.cube {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
/* Other transform properties here */
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
在webkit内核的浏览器中,另一个行之有效的方法是:
.cube {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
但是硬件加速同样存在问题:
使用GPU可能会导致严重的性能问题,因为它增加了内存的使用,而且它会减少移动端设备的电池寿命。
并且经过亲测,灵敏度略有提高,但还是达不到理想的效果。
(博主的手机也不差吧,努比亚z9max,希望大家可以把测试的结果告诉我哦)
设置长按事件但浏览器默认的提示菜单也会跳出来
别一棍子打死,认为浏览器默认的就无法改变。
首先可以考虑取消浏览器默认事件,其他的事件也可以阻止。
在iPhone中很好解决,只要给长按的div设置两个css:
-webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
-moz-user-select: none;
- 1
- 2
在安卓中:
window.ontouchstart = function(e) { e.preventDefault(); };
- 1
但不知道为什么还是没能阻止提示菜单的出现,于是我又发现了一个:
document.oncontextmenu = function(){return false;};
- 1
没想到成功阻止了。
但是,在chrome及其他浏览器都可以,但在微信浏览器里还是无法实现。(⊙o⊙)…
移动端开发的框架推荐
jquery mobile
这应该是很多人在用的移动端开发框架,方便。然而我却并不喜欢。
首先,jquery为了兼容性,有很多可能你根本用不到的地方,因此造成了空间的浪费。当然它的兼容性也是它强大的优势之一。
jquery mobile的一个优点是你可以选择一些组件进行下载,因此大小可控。然而他对不同手机的兼容性似乎并不是太好,比如安卓的微信浏览器。
SUI mobile
一个由淘宝团队开发的框架。基于zepto。
它的组件还是不错的,但是在布局、样式方面比较局限。到后面我基本都没怎么用它的组件,因为毕竟自己写比改别人代码方便。
基于zepto让他既有优势又充满劣势。
zepto算是jquery的阉割版,因此文件小了很多。可是有些在移动端常用的方法也没了,比如我最喜欢用的animate。所以要做动画只能原生或者用css3,当然,坑爹的微信浏览器似乎也没有非常好得支持css3,so….
weUI
这是一个在github上找到的框架,据说是微信团队开发的,还没使用,下次试试看。先放上链接weUI。
总结
能用原生就用原生,加快速度。。嘻嘻。。。
select标签移动端兼容
select选中事件用change,(用click会执行两次);select标签对移动端的兼容:.custom-selectselect{width:100%;margin:0;background:none;border:1pxsolidtransparent;outline:none;/*Prefixedbox-sizingrulesnecessaryforolderbrowsers*/-we 查看详情
移动端可以兼容fullpage.js吗
参考技术A可以。fullpage.js全屏滚动插件,基于jq库,可以利用它很方便、很轻松的来制作全屏网站;它支持手机、平板触摸事件,也支持CSS3动画,对移动端有很好的兼容性。 查看详情
移动端bug兼容(代码片段)
总结一下目前的移动端开发遇到的问题。1、IOS与安卓input默认样式去除。移动端总有一个默认的圆角或别的。input[type=button],input[type=text],input[type=password]-webkit-appearance:none;outline:none;border-radius:none;2、IOS后退无刷新使用onpageshow主动... 查看详情
移动端300ms兼容问题(移动端经典问题)(代码片段)
移动端300ms延迟原因2007年初。苹果公司在发布首款iPhone前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对iPhone这种小屏幕浏览桌面端站点的问题。双击缩放(doubletaptozoom),这... 查看详情
兼容性测试规范-移动端
摘要:一般的兼容性测试以版本迭代为周期、在产品测试阶段以及上线验证阶段进行。在此规范中将详细说明我们的规范形成依据,以及在此基础上的详细分析和对应的兼容性测试规范,包括如下方面:(1)需要进行兼容... 查看详情
移动端audio音频播放兼容方案
现在很多移动端要求audio播放必需由用户的事件触发,否则就劫持。实际应用中经常会出现JS网络请求通过返回的结果来决定播放什么音频,在移动端是不允许的。当移动需要通过网络请求回调来播放音频时,就得做点准备工作... 查看详情
移动端兼容处理(代码片段)
首先上一段判断android和ios的js代码functionnavigator()varu=navigator.userAgent;varisAndroid=u.indexOf(‘Android‘)>-1||u.indexOf(‘Adr‘)>-1;//android终端varisiOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);//ios终端if 查看详情
移动端兼容问题注意事项
1.IOS移动端click事件300ms的延迟响应移动设备上的web网页有300ms延迟,有时会造成按钮点击延迟或者点击失效。苹果为了将适用于PC端大屏幕的网页能较好的展示在手机端上,使用了双击缩放(doubletaptozoom)的方案,发布IOS系统搭载的... 查看详情
移动端布局
...也可以越来越好看随着科技发展布局也分为:pc端布局和移动端布局pc端布局的难点是要兼容每个浏览器→chromeFFIE678,最烦人的是ie,具体的问题自己可以百度移动端不需要兼容每个浏览器,移动端只有一个内核浏览器-webkit-但是... 查看详情
移动端兼容
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>(部分安卓手机的UC浏览器写完以后还是可以放大缩小)忽略将页面中的数字... 查看详情
移动端兼容问题(代码片段)
1.华为手机自带浏览器 不支持 text-decoration:underline;解决方案:varua=navigator.userAgent.toLowerCase();if(ua.match(/huawei/==‘huawei‘))$(‘.info-linka‘).css(‘border-bottom‘,‘1pxsolid‘); &n 查看详情
Three.js 示例不完全兼容移动端
】Three.js示例不完全兼容移动端【英文标题】:Three.jsexamplenotcompletelycompatiblewithmobile【发布时间】:2016-01-2316:20:02【问题描述】:我对移动设备上的“后处理/故障”示例有疑问。只是雪效应造成了麻烦。在桌面上,它会在故障期... 查看详情
markdownpad2代码高亮插件兼容移动端样式
...可以查看前一篇文章《MarkdownPad2使用代码高亮插件》先看移动端效果图:移动端点击查看效果 或者手机扫如下二维码:我们经常阅读微信公众号文章的时候,常常看到文章内有高亮的代码,并且这代码不会换行,可以左右拖... 查看详情
pc端移动端兼容的大图轮播(代码片段)
body,htmlwidth:100%;*margin:0;padding:0;list-style:none;.hahalist-style-type:none;.navwidth:100%;height:300px;overflow:hidden;position:relative;.warpheight:300px;position:absolute;.warp.haha 查看详情
关于sessionstorage的移动端兼容问题
最近在开发移动端项目时,需要用到的本地存储的地方不少。都是一些只要记住当前打开窗口的用户数据就行,所以我选择用的sessionStorage。使用场景如下:A.html页面需要记录一条数据{a:1,b:2};sessionStorage.setItem("data","{a:1,b:2}");B.htm... 查看详情
如何兼容移动端(安卓和ios)情况2-移动端开发注意事项(代码片段)
一、meta标签使用1、meta的使用<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>强制让文档的宽度与设 查看详情
移动端部分兼容问题
1、H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> (部分安卓手机的UC浏览器写完以后还是可以放大缩小)2、忽略... 查看详情
手机端图片的移动缩放旋转兼容touch
//缩放varinitialScale=1;varcurrentScale=1;touch.on(‘#target‘,‘pinch‘,function(ev){currentScale=ev.scale-1;currentScale=initialScale+currentScale;currentScale=currentScale>1.5?1.5:currentScale;current 查看详情