2017最新整理移动Web开发遇到的坑
随着移动互联网的发展、WebApp似乎一种不可逾越的鸿沟;越来越多的企业开始趋势于轻量级的设计,H5正在慢慢的发酵可以完成更多的原生体验;
交互质量的提升,对前端更是一种质的飞越;前端作为门槛低,精深难的事实一直被论证,想成为真正大神,要经历痛苦的月球表面-满满的都是坑;
只有爬过来的人,才有资格说:要改变、要革新、做架构~
说了那么多,就是为了小伙伴们在前端的路上更加精细的学习;本文持续更新移动Web的各种大小泥坑~
目录(更新20170216)
1.meta基础知识
2.移动端字体解决方案
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;}
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的:
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的颜色值能改变么
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
其他:
禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片:.css{-webkit-touch-callout: none}
禁止ios和android用户选中文字:.css{-webkit-user-select:none}
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布局目前可使用在移动中,并非所有的语法都全兼容,但以下写法笔者实践过,效果良好~
7.0.5像素边框的实现
大家都知道,设计稿中的1像素,在页面上其实就是2像素;这时他们就会说,我们的1px太粗;
其实,我们应该用理解的态度对待这件事,因为0.5像素的线确实好看,因为原生的线也是0.5像素;如果你学习了这个方法,其实也不会再介意1px和0.5px了;
下面是一个demo 纯css利用伪类实现,总体来讲还是比较稳定的,要求同级必须是相对定位;
转载于:https://www.cnblogs.com/NatChen/p/6418218.html
2017最新整理移动Web开发遇到的坑相关推荐
- 2017最新整理传智播客JavaEE第49期 基础就业班
2017最新整理传智播客JavaEE第49期 基础就业班 可以说是一套不可多的的教程,有条件的同学建议报名培训,效果更佳,没有条件的朋友就买个培训课堂上录制的视频吧. 视频教程推送门:http://b ...
- 360浏览器 ajax取缓存,web开发遇到的坑之360浏览器缓存问题
web开发遇到的坑之360浏览器缓存问题 再使用360浏览器,浏览我自己开发的一个配置的web管理后台时,发现,使用ctrl+F5都不能刷新表格的数据,还有,我添加字段时,明明是添加成功的,用sql再 ...
- 最新移动端web开发总结
1.前言 到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域.用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们产品质量越来越高,w ...
- 2017最新整理python全栈工程师系统培训之路精品课程(全套)
百度搜索"一起自学吧"做大数据专家,不做第一,只做唯一. 课程介绍: 本课程由一起自学吧论坛打造,目的是给想成为Python全栈工程师的同学提供一套完整,全面而系统的培训课程,课程 ...
- [WEB地图] 2017高德地图API WEB开发(key申请,地图搭建)简约教程
前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情 高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去"高德 ...
- Web中html个人介绍代码,web开发工程师自我介绍示例
web开发工程师自我介绍示例 Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发.小编整理了web开发工程师自我介绍示例, ...
- Web开发day5:项目
目录 1. 创建django项目 2. 创建app,设置名称为website,并注册,改语言 3. 加插件 4. 设计表结构 5. 在MySQL中生成表 6. 开始项目,上代码 7. 效果图 进度来源 ...
- Web开发day1:使用flask快速搭建网站
目录 1. 简单跑通 2. 浏览器能识别的标签 2.1 编码(head中) 2.2 标题(head中) 2.3 标题(body中,块级标签) 2.4 div和span(body中,div块级标签,sp ...
- Web开发day3:CSS样式补充
目录 1. hover 2. after 3. position 4. border 进度来源:最新Python的web开发全家桶(django+前端+数据库) 网址:最新Python的web开发全家 ...
最新文章
- 卡牌系统psv游戏推荐_索尼PSV已经凉了吗?等等,2020年六月还有一款PSV游戏发售...
- IOS开发基础之socket的使用
- linux怎样以root用户运行,如何在Linux机器中以root用户身份运行Elastic...
- r语言 四格画图_R绘图基础(一)
- 初学者C语言输入输出挖坑填补处须知
- macbook连接外接键盘
- DBeaver 连接 人大金仓以及其他国产数据库
- 支付二清与第三方支付
- python创建excel新的表格_python创建Excel表格并添加工作表
- linux 进入mysql
- 使用 Scrapy + Selenium 爬取动态渲染的页面
- Linux系列学习(二) - Vim编辑器的介绍及使用、文件编译的过程、Makefile工具、Gdb调试器
- 积目服务器维护,搭建经济高效的制作网络服务器群试验平台
- python 列表根据汉字拼音进行排序 / 查询结果集(列表嵌套字典)根据特定key字段拼音进行整体排序
- dubbo之SPI Wrapper分析
- 【声卡宿主】ProTools 2021.7.0使用安装教程
- sentinel 1A数据升降轨道
- 机器人瓦力 配乐_浅析《机器人瓦力》的电影配乐
- Abaqus GUI程序开发之常用控件使用方法(八):快捷键设置
- 江苏实现自然村通宽带 农村宽带网速可达4M
热门文章
- 2019年猪年海报PSD模板-第二部分
- 信息技术用计算机画画教学设计,小学四年级信息技术用计算机画画教学设计
- 我的世界服务器怎么修改地图,《我的世界手机版》pocketmine服务器怎么更换地图?...
- 卡图星小机器人怎么过_《瑞奇与叮当》黄金螺丝收集 黄金螺丝收集图文攻略...
- Linux全攻略--Mail服务器配置与管理
- 浙江教师计算机职称考试,浙江今年不再组织职称外语统一考试 计算机照考
- Friends——一个简单的Processing小游戏
- javaweb家庭装修项目管理系统
- Python 自动推送百度收录脚本
- 头条笔试题:任务调度