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共存的情况下,例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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,用于支撑背面旋转元素的显示空间。
应用场景:实现路灯打光效果,从上到下打工,阴影是梯形的,这样还可以在底部再加一个椭圆,会更加形象;