移动端页面遇到过的坑
ps：本文只是针对移动端页面，涉及的浏览器主要是ios和android的默认浏览器
1：屏幕宽度获取问题：iPhone获取screen宽度都是物理宽度，安卓获取的是像素宽度
具体：IOS（浏览器全屏的时候）： window.screen.width==window.screen.availWidth==document.body.offsetWidth==320（物理宽度）
三星Galaxy Note 3/2 （全屏状态）： window.screen.width==window.screen.availWidth==1080(像素宽度) document.body.offsetWidth==320（物理宽度）
ps：如果想获取像素宽度（实际能显示多少个像素点），在IOS设备上需要 window.screen.width*window.devicePixelRatio(ios设备retina显示器的话 devicePixelRatio==2);
而在Galaxy 上是 window.screen.width=document.body.offsetWidth*window.devicePixelRatio（Galaxy 的devicePixelRatio==3）；
2：flex支持问题：目前设备（ios7，Android4.4）都不支持display：flex写法
解决方案：用 display：-webkit-box；代替display：flex；
注意事项：1： display：-webkit-box模式下，只能对display：block元素进行弹性布局。所以在子元素为span，a，i元素等情况下需要设置 display：block（注意设置了display：block之后，原本的内联
元素就变成了块级元素，文字垂直的时候需要有height和line-height支持）；
2：在flex模式下，弹性元素可以设置flex：auto，flex：none等属性，用于控制元素收缩属性，但是在-webkit-box模式下是没有这种设置，只有-webkit-box-flex：{number}，只能控制弹性元素
的空间分配比例，类似的flex：auto可以用-webkit-flex：1来替代，但是不完全等同，而flex：none可以不需要设置，因为默认弹性元素在-webkit-box模式下就不会自动延展。
3：3D旋转问题：问题出现于Safari（mac和iPhone上都出现这个问题）
问题详细描述：这个问题比较奇特，出现情况在&：before，element，&：after共存的情况下，例子：
1 <style type="text/css"> 2 .ThreeDTransforme { 3 width: 300px; 4 height: 300px; 5 position: relative; 6 } 7 .ThreeDTransforme:before { 8 z-index: 1; 9 left: 10px; 10 top: 0; 11 width: 300px; 12 height: 300px; 13 content: ""; 14 background-color: #333; 15 -webkit-transform: perspective(400px) rotateX(20deg); 16 -webkit-transform-origin: 50% 50% 0; 17 opacity: 0.5; 18 position: absolute; 19 } 20 .innerBox { 21 width: 100%; 22 height: 100%; 23 background-color: blue; 24 position: relative; 25 z-index: 2; 26 } 27 </style> 28 <div class="ThreeDTransforme"> 29 <div class="innerBox"></div> 30 </div>
在chrome下是正常显示的，截图：
但是在Safari内显示截图：
差别在于Safari内会把不同层级的3D旋转放在一个层级解释，导致旋转之后有一部分会显示出来并且盖住我们要看到的元素；
解决方案：在&（外部层级）上加上overflow：hidden；这样就不会盖住蓝色的一块。但是需要给蓝块加上margin，用于支撑背面旋转元素的显示空间。
应用场景：实现路灯打光效果，从上到下打工，阴影是梯形的，这样还可以在底部再加一个椭圆，会更加形象；
