再也不会遇到兼容性问题：IOS兼容问题大揭秘，告别iPhone6的时代🙏
2024-01-05 01:47:30
记一次头疼的IOS兼容，愿世界再无iPhone6🙏
最近在写一个项目，碰到的问题还挺多，不难但都挺琐碎的，其中IOS机型兼容是真的让人头疼。
1： IOS transform:rotate失效
这个问题是最让我让人头疼啊！！！！！因为要实现一个这样的页面：
就是需要这样一个旋转动画，实现起来很简单：
div{
width:100px;
height:100px;
background-color: red;
transform:rotate(45deg);
}
但是IOS 8的safari中是无效的，如图：
只能看到一个竖直的红色块。
原因是IOS 8的safari中，transform:rotate这个属性的默认值为0，也就是无论你怎么设置rotate的值，它都以0为基准进行旋转。
解决方法：
div{
width:100px;
height:100px;
background-color: red;
transform:rotate(45deg);
transform-origin: 50% 50%;
}
transform-origin属性指定了旋转的原点，默认是（0，0），也就是左上角。我们把它设置成50% 50%，也就是中心点，这样就可以让它围绕中心旋转了。
但是，这个方法在IOS 9的safari中又失效了。。。
经过一番折腾，终于找到了一个解决办法：
div{
width:100px;
height:100px;
background-color: red;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
transform-origin: 50% 50%;
}
同时使用了-webkit-transform和transform两个属性，这样就能兼容IOS 8和IOS 9了。
2：IOS绝对定位失效
这个问题是我在写一个类似于这样的页面时遇到的：
其中有一个绝对定位的按钮，但是IOS 8的safari中却无法正常显示：
原因是IOS 8的safari中，绝对定位的元素会受到父元素的transform属性的影响。
解决方法：
给父元素添加一个transform:translateZ(0)属性，这样就可以把父元素从3D空间中移出来，从而不受transform:rotate属性的影响了。
.parent{
transform:translateZ(0);
}
.button{
position:absolute;
left:0;
top:0;
}
3：IOS 点击穿透问题
这个问题是我在写一个类似于这样的页面时遇到的：
其中有一个按钮，但是IOS 8的safari中，点击按钮时会穿透到下面的元素：
原因是IOS 8的safari中，对于绝对定位的元素，默认情况下是不会触发click事件的。
解决方法：
给绝对定位的元素添加一个pointer-events:auto属性，这样就可以让它触发click事件了。
.button{
position:absolute;
left:0;
top:0;
pointer-events:auto;
}
4：IOS input输入框光标问题
这个问题是我在写一个类似于这样的页面时遇到的：
其中有一个输入框，但是IOS 8的safari中，输入框的光标无法正常显示：
原因是IOS 8的safari中，输入框的光标默认是白色的，而输入框的背景色也是白色的，所以导致光标无法显示。
解决方法：
给输入框添加一个color属性，这样就可以改变光标的颜色了。
input{
color:black;
}
5：IOS video标签全屏问题
这个问题是我在写一个类似于这样的页面时遇到的：
其中有一个视频标签，但是IOS 8的safari中，点击全屏按钮后，视频无法全屏显示：
原因是IOS 8的safari中，video标签的全屏功能需要手动触发。
解决方法：
给video标签添加一个webkit-playsinline属性，这样就可以让视频在页面中直接播放，而不必全屏。然后，再给video标签添加一个onclick事件，在事件中手动触发全屏功能。
video{
webkit-playsinline;
}
video.onclick=function(){
this.webkitEnterFullscreen();
}
以上是我在IOS开发中遇到的比较常见的兼容性问题，当然还有很多其他问题，这里就不一一列举了。希望这篇文章能对大家有所帮助，让大家少走一些弯路。
最后，再补充一句：IOS兼容性问题真的是很让人头疼，希望IOS 10能彻底解决这些问题，让IOS开发更美好！
