移动端开发梳理
零零碎碎学习了移动端开发的一些常识，还是梳理一下吧：
1.视口设置：
传统PC页面在手机上显示，会根据默认Viewport缩放（ios为980px,安卓有不同数值），让页面整个呈现在手机上，但缩放后字图图片过小。
移动端上开发，首先为了排版正确，第一步是设置viewport为合适的值，一般设宽度为设备。
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
visual viewport：手机屏幕能看到的尺寸，会因为缩放而改变。
layout viewport:布局viewport，渲染时，底层页面的实际尺寸。
一般说的viewport指的是layout viewport，因为移动端页面往往会禁止用户缩放，或者限制了缩放的区间。
2.布局：
由于y移动设备尺寸不一，解决布局自适应的基本方案是使用百分比布局，除了使用%，还有vw、vh单位，分别表示设备宽/高的百分之一。
3.字体：
px、em、rem
em在多层嵌套下不好控制，推荐rem，r是root的意思，即基于html比率的字体大小。
rem的基值，慕课网的视频中推荐是screen.width/20,也就是说，320px的屏幕1rem为16px;可以。
4.图片：
自适应：div>img:width:max-width;height:auto;
清晰度：宽高应该用物理像素渲染：100px*100px的图片，用100dp*100dp渲染；
width:(w_value/dpr)px;
height:(h_value/dpr)px;
根据dpr选择不同分辨率图片：
<img :src="img1.jpg" :srcset="img2.jpg 2x,img3.jpg 3x'" alt="test">
*img1、img2、img3分别是某张图片的小中大体裁，-webkit-内核的浏览器可以根据设备像素密度选择合适大小的图片。可惜在IE和Android4.4以下无效。
也可以使用picture标签根据分辨率切换图片：
1 <picture> 2 <source media="(max-width: 240px)" srcset="/uploads/1703/city5.jpg 1x, 3 /uploads/1703/city5big.jpg 2x" /> 4 <source media="(max-width: 480px)" srcset="/uploads/1703/city5-m.jpg 1x, 5 /uploads/1703/city5big-m.jpg 2x" /> 6 <img src="/uploads/1703/city5.jpg" alt="City" /> 7 </picture>
另外，如果图片使用rem单位的话：
width:(w_value/rem基值 )rem；
height:(h_value/rem基值) rem;
5.flex布局（弹性伸缩盒子）
内容自动填充满容器（等比或按比例填充），详见阮一峰课程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
*android4.4一下只能用flexbox布局
6.响应式：在不同尺寸的设备上选择性地使用某些样式，达到按设备尺寸渲染的目的。
--核心是使用css3的媒体查询：
@media screen and (max-width: 320px) { body { background-color:lightblue; } } @media screen and (max-width: 980px) { body { background-color:red; } } ...
--百分比布局；
--弹性图片：img标签外有个div容器，宽度随页面伸缩变化，img本身width：max-width；height：auto；充满整个div。
--适应小屏幕时，做到：
1.同比例缩小元素。
2.调整结构布局。
3.隐藏冗余元素。
*由于响应式设计的css包括了不同尺寸的的渲染方案，因而有冗余的缺点；现在不少企业都给移动端一个域，如m.xxx.com，这种情况下就是移动端/PC端分开两套方案，在用户进入页面时先判断设备再适配到相应的页面即可。
9. 1像素变框：
原因：1px的框在retina屏幕上用了2dp来渲染；
border:0.5px 是不行的（仅ios8可用）
因为是移动端，所以css3的tranform：scaleY可用：
1 li:before{ 2 position:absolute; 3 top:-1px; 4 left:0; 5 content:''; 6 width:100%; 7 height:1px; 8 border-top:1px solid #333; 9 -webkit-transform:scaleY(.5); 10 }
10.文本溢出：
1 .singe{ 2 overflow:hidden; 3 white-space:nowrap; 4 text-overflow:ellipsis; 5 } 6 .more{ 7 display:-webkit-box; 8 overflow:hiden; 9 10 text-overflow:ellipsis; 11 word-break:break-all; 12 13 -webkit-box-orient:vertical; //纵向审查 14 -webkit-line-clamp:2; //限定行数 15 }
遇到的问题及方案（想到再写）：
11.交互：
tap事件：也就是touchstart | touchmove | touchend 事件
click事件在移动端上有300ms的延时，因为click要判断是不是双击事件。因而touchstart响应更快，但是tap事件有点透现象：
当我们touch屏幕的时候，按时间顺序，会对点中的位置依次触发touchstart、touchend、click事件。
所谓点透，就是AB两元素在Z轴上重合时，比如页面此时有个遮罩层，我们手指点击遮罩层让它隐藏，可是手指点击的地方遮罩层下边有个a链接，当遮罩层隐藏之后click事件才被触发，这个链接就会被触发。这跟事件冒泡/捕获是两码事。
常用的解决方案是：
1.引入fastclick插件；
2.遮罩层缓慢淡出，反正在click事件触发后才撤掉遮罩层就好了。
12.移动端网站或APP点击后出现闪动或灰色背景：
解决方案：
对绑定事件的元素添加样式：{-webkit-tap-highlight-color:transparent;}，使触发时背景色为透明。
13.ios下fixed布局产生这样那样的问题，如橡皮筋现象、滑动时顶部底部被背景遮盖等，之前花精力在内外网搜了一番，业内普遍对fixed的bug没有好的解决方案：
解决方案：在布局的时候尽量避免用fixed，改用flex布局或绝对定位代替。input标签在focus的时候改为position:absolute；blur的时候再改回来。
补充一个知乎上ios和安卓兼容问题的帖子：https://www.zhihu.com/question/34556725
慕课视频看到的一张图：
