javascript - 逻辑分辨率小于等于iphone5的逻辑像素时元素定位出现问题

Question

我手写了一个微信会员中心的页面,该页面的运行环境是微信,但是页面显示的兼容性出现了一个问题,该界面在所有的安桌设备中显示正常,在所有iphone6及以上设备中显示正常,但是在iphone5和iphone4中显示就出现了定位异常.在电脑中编写代码时,我在不同设备的模拟中也没有出现问题,所以我也找不出问题出现在什么地方,希望大家能够帮助我.

这是在设备中正常显示的样子

这是在iphone5和iphone4中出现定位bug中的样式

页面中定位出现问题的元素全部都是absolute绝对定位元素

position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%); 

使用的居中方法如上代码.
整体布局使用了bootstrap栅格网络进行分栏

请高手指点!

Answer 1

这个很明显，就是你的兼容，少加了-webkit-的，手机基本上都是webkit。所以低版本会不兼容，其实2个就够了。

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);