最新Web前端移动开发遇到的坑_网站前端开发_前端开发者

网站前端开发_前端开发者丨前端开发

https://www.rokub.com

html 代码

目录(更新20170221)

[color=#f79646]1.meta基础知识
html 代码

相对来讲是比较全的meta 可以根据自己项目需求做删减;
2.移动端字体解决方案
/ 移动端定义字体的代码 /
css 代码

iOS 4.0+ (iOS 9以下系统已经非常少) 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。 中文字体设置为华文黑体STHeiTi。
iOS 9+ Safari开始支持 -apple-system 参数, Chrome 使用 BlinkMacSystemFont ,兼容 iOS / MacOS
微软雅黑是为了兼容Win系统,毕竟视网膜分辨率的win系统用Simsun是非常丑陋的,可以用4K屏@windowns 去看 JD 淘宝,你能忍的话我就没话说
PingFang SC 是简体苹方,看需要 如果要命中对应 苹方字体的话 直接写 PingFang 不带引号。
4.0之前版本英文字体原生Android使用的是Droid Sans,中文字体原生Android会命中Droid Sans Fallback。
4.0+ 中英文字体都会使用原生Android新的Roboto字体。
其他第三方Android系统也一致选择默认的无衬线字体。
Android 就直接让它命中系统字体吧,因为你无法预知发行厂商会去内置什么字体,或者人家root去修改什么字体。
移动端字体单位font-size选择px还是rem
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可
对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备
rem配置参考,适合视觉稿宽度为750px的:
可以借鉴手淘的解决方案:http://lib.csdn.net/article/html5/42085
媒体查询参考
html 代码

3.Touch事件的详细解析
当用户手指放在移动设备在屏幕上滑动会触发的touch事件
以下支持webkit
touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用
TouchEvent
touches:屏幕上所有手指的信息
targetTouches:手指在目标区域的手指信息
changedTouches:最近一次触发该事件的手指信息
touchend时,touches与targetTouches信息会被删除,changedTouches保存的最后一次的信息,最好用于计算手指信息
参数信息(changedTouches[0])
clientX、clientY在显示区的坐标
target:当前元素
参考:https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
4.Click事件的延时问题
移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。
原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接<a href=”#”></a>,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后,浏览器会先Hold一段时间t,如果在t时间区间里用户未进行下一次点击,则浏览器会做单击跳转链接的处理,如果t时间里用户进行了第二次单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢?在IOS safari下,大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。
解决方案:
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块,tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick
解决300ms延迟的问题,也可以通过绑定ontouchstart事件,加快对事件的响应。
5.webkit表单输入框placeholder的颜色值能改变么
html 代码

其他:
禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片
html 代码

禁止ios和android用户选中文字
html 代码

5.常用的移动端框架
zepto.js
语法与jquery几乎一样,会jquery基本会zepto~
最新版本已经更新到1.16
官网:http://zeptojs.com/
中文(非官网):http://www.css88.com/doc/zeptojs_api/
常使用的扩展模块:
浏览器检测:https://github.com/madrobby/zepto/blob/master/src/detect.js
tap事件:https://github.com/madrobby/zepto/blob/master/src/touch.js
iscroll.js
解决页面不支持弹性滚动,不支持fixed引起的问题~
实现下拉刷新,滑屏,缩放等功能~
最新版本已经更新到5.0
官网:http://cubiq.org/iscroll-5
underscore.js
笔者没用过,不过听说好用,推荐给大家~
该库提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象。
最新版本已经更新到1.8.2
官网:http://underscorejs.org/
滑屏框架
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js
fullpage.js
swiper.js
6.Flex布局
flex布局目前可使用在移动中,并非所有的语法都全兼容,但以下写法笔者实践过,效果良好~
html 代码

FastClick
消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟
参考《FastClick》
Sea.js
提供简单、极致的模块化开发体验
简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 node.js 一般书写模块代码。
自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。
地址:http://seajs.org/docs/
7.0.5像素边框的实现
大家都知道,设计稿中的1像素,在页面上其实就是2像素;这时他们就会说,我们的1px太粗;
其实,我们应该用理解的态度对待这件事,因为0.5像素的线确实好看,因为原生的线也是0.5像素;如果你学习了这个方法,其实也不会再介意1px和0.5px了;
下面是一个demo 纯css利用伪类实现,总体来讲还是比较稳定的,要求同级必须是相对定位;
html 代码

8.解决移动端双击页面上滑问题
javascript 代码

8.最近浏览解决WebApp适配方案(不借助框架)

2017最新整理移动Web开发遇到的坑坑坑坑~~~~
现在PC和移动端正在细分,并且越走越远,建议小伙伴们坚定自己的方向,让专业更专业;
最近面试了一些新人,总感觉很浮躁;接触的是很多,太多依赖框架;去除框架完全分不清东西南北,这样不好;
因为前端本身就是繁杂,不过繁杂的背后一直都是稳固的基础。有了基础,你可以写一套为别人服务的框架;反之则不然;
移动端布局方案还是要清晰的了解一下的;老前端更系统,新前端有个正确的认识;
#####一、百分比布局(不多介绍)
缺点:
宽度可以随屏幕适应,但高度不能,宽屏下会被拉伸,具体表现为,iphone 4中看到的是正方形,而到了iphone 6s中看到的是长方形
需要手动计算子元素在父元素下的百分比,计算麻烦
百分比的大小往往需要精确到小数位6到8位
#####二、媒体查询布局(不多介绍)
缺点:
无法完全适配Android设备各种屏幕,无法保证显示的一致性,如:定义了一个模块的高度在 321 至 375下是40px,那么一个模块在这个范围的屏幕中显示就是40px,而不能随屏幕大小而变化
#####三、flex布局
类似于百分比布局,无需计算百分比,可以很好的适配所有屏幕
手机天猫 典型的flex布局,flex做了很好的兼容处理,高度写死,可查看顶部搜索栏源码
缺点:
有着和百分比布局一样的缺点,高度不便调整
有几种不同的flex标准,在低端ios和安卓中有着各种各样的兼容性问题;UC支持比较差(亲测);
#####四、使用rem单位
和上面的几种布局方案结合使用,主要做高度调整,保证布局一致
视口缩放使用rem
设计稿为750的设计稿
320 dpr=1 font-size=32px
320 dpr=2 font-size=64px
375 dpr=2 font-size=75px
414 dpr=3 font-size=124.2px
换算规则:(屏幕宽度 * dpr )/10 (除以10是为了将屏幕平分10份,为了将来替换成vm或vh单位)
屏幕根据dpr的值进行了相应的缩放
很好的还原了1px在高清屏真实度
图片使用了750下的两倍图,并没有做按dpr的值加载不同的图片
px转rem需要使用工具转换
#####五、使用框架提供的解决方案
缺点:
不过一般公司自有项目都不借助框架的,局限性太强;
还有一个更好的,Github里的,正在研究…尚未测试
9.移动H5长按复制/禁止长按复制(不借助框架)
这个是个小问题,不过项目一旦要求挺蛋疼的不如学会喽;
html,body{
-webkit-user-select:none;
}
去除就禁止了,移动端支持率比较良好~

网站前端开发_前端开发者丨前端开发

https://www.rokub.com

» 本文来自:前端开发者 » 《最新Web前端移动开发遇到的坑_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/2518.html
» 您也可以订阅本站:https://www.rokub.com
赞(2)
64K

评论 抢沙发

评论前必须登录!