2017最新整理移动Web开发遇到的坑坑坑坑~~~~

okuboy
okuboy 发布于 6 天前 浏览:2569 类型:原创 - 教程 分类:JavaScript - HTML5+CSS3 二维码: 作者原创 版权保护
随着前端的热度不断升温,行业对前端的要求越来越高;精准无误的实现UI设计,已成为前端职业更加精细化的一种表现;
随着移动互联网的发展、WebApp似乎一种不可逾越的鸿沟;越来越多的企业开始趋势于轻量级的设计,H5正在慢慢的发酵可以完成更多的原生体验;
交互质量的提升,对前端更是一种质的飞越;前端作为门槛低,精深难的事实一直被论证,想成为真正大神,要经历痛苦的月球表面-满满的都是坑;
只有爬过来的人,才有资格说:要改变、要革新、做架构~
说了那么多,就是为了小伙伴们在前端的路上更加精细的学习;本文持续更新移动Web的各种大小泥坑~
如果想了解更多关于我的blog,可以来我的个站:http://www.maleh5.com(全栈开发)
<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=85c638fe0b6c297ff75f740772468a4c94b582fa7959c1b8968bf57f39985b02"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="web前端交流总群" title="web前端交流总群"></a>(2000人前端小白学习群)

目录(更新20170221)
1.meta基础知识
<!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta name="flexible" content="initial-dpr=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="male"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题(iOS 6 新增) -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="msapplication-TileColor" content="#000"/>

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

body {
    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的:
可以借鉴手淘的解决方案:http://lib.csdn.net/article/html5/42085媒体查询参考
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

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::-webkit-input-placeholder{color:#AAAAAA;}
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布局目前可使用在移动中,并非所有的语法都全兼容,但以下写法笔者实践过,效果良好~
/* ============================================================
   flex:定义布局为盒模型
   flex-v:盒模型垂直布局
   flex-1:子元素占据剩余的空间
   flex-align-center:子元素垂直居中
   flex-pack-center:子元素水平居中
   flex-pack-justify:子元素两端对齐
   兼容性:ios 4+、android 2.3+、winphone8+
   ============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

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利用伪类实现,总体来讲还是比较稳定的,要求同级必须是相对定位;
<div class="box">
    <div class="btn">
        0.5像素↓
    </div>
</div>
<style type="text/css" media="all">
    .box{
        width:300px;
        height:300px;
        background-color:#f1f1f1;
    }
    .btn{
        width:300px;
        line-height:150px;
        position:relative;
        background-color:#f1f1f1;
        text-align:center;
    }
    .btn:after {
    content: " ";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    color: #d9d9d9;
    bottom: 0;
    border-bottom: 1px solid #fff;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5)
}
/**less写法**/
.bor-b(@col:#eee) {
  position: relative;
  &:after{
    content: " ";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    color: #d9d9d9;
    bottom: 0;
    border-bottom: 1px solid @col;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);}
}
</style>

8.解决移动端双击页面上滑问题
function proMove() {
	var agent = navigator.userAgent.toLowerCase(); //检测是否是ios
	var iLastTouch = null; //缓存上一次tap的时间
	if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0) {
		document.body.addEventListener('touchend', function(event) {
			var iNow = new Date().getTime();

			iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
			var delta = iNow - iLastTouch;
			if(delta < 500 && delta > 0) {
				event.preventDefault();
				return false;
			}
			iLastTouch = iNow;
		}, false);
	}
}

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里的,正在研究...尚未测试
巨友们,如果有更好的方案可以加入QQ群554576947  一起探讨;或者登陆我的个站www.maleh5.com 一起前进~
等待持续更新....2017-2-21 17:50:28
z
给个赞 60 人点赞
收藏 162 人收藏
评论 已有 7 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
wuzhe128520
wuzhe128520前天 16:127F
感谢楼主,收藏学习学习
举报 支持 (0) 回复 (0)
kevinzhou
kevinzhou前天 12:176F
楼主威武,表示做了两年移动端,没整理过,感谢整理,默默的收了。。。
举报 支持 (0) 回复 (0)
阿波罗D波
阿波罗D波5 天前5F
群主,威武!
举报 支持 (0) 回复 (0)
15295751328
152957513286 天前4F
感谢楼主的
举报 支持 (0) 回复 (0)
15295751328
152957513286 天前3F
me too //@1197410313:以前从没写过手机端的,刚刚进了一家公司,人家就专门做APP的,对于一个菜鸟的我来说,看到楼主这篇文章,真的太幸运了,感谢楼主
举报 支持 (0) 回复 (0)
分界线
分界线6 天前2F
赞一个
举报 支持 (0) 回复 (0)
1197410313
11974103136 天前1F
以前从没写过手机端的,刚刚进了一家公司,人家就专门做APP的,对于一个菜鸟的我来说,看到楼主这篇文章,真的太幸运了,感谢楼主
举报 支持 (0) 回复 (1)
okuboy okuboy 作者

Web初级——高手的历程见证者

作者最新