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

新手上路,请多包涵

我手写了一个微信会员中心的页面,该页面的运行环境是微信,但是页面显示的兼容性出现了一个问题,该界面在所有的安桌设备中显示正常,在所有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栅格网络进行分栏

请高手指点!

阅读 1.9k
1 个回答

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

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%); 
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题