CSS 转换在移动设备上不起作用答案

【问题标题】：CSS transform not working on mobileCSS 转换在移动设备上不起作用
【发布时间】：2015-09-23 17:10:29
【问题描述】：

我有一个隐藏的购物车和菜单，它们是固定的 div，通过 CSS 变换定位在屏幕外。

.cart-slide{
  position:fixed;
  top:0;
  bottom:0;
  overflow-y:scroll;
  overflow-x:hidden;
  padding:20px 40px;
  right:0;
  width:40%;
  transform:translate3D(100%, 0, 0);
}
.cart-open{ 
    .cart-slide{
    transform:translate3D(0, 0, 0);
    }
}

它们在桌面和谷歌设备模式下工作正常，但在移动设备上加载时转换不起作用，这会使 div 永久覆盖屏幕。有没有办法解决这个问题？

【问题讨论】：

标签： html css mobile

【解决方案1】：

我认为转换是可以的，但它需要供应商前缀。尝试添加：

-ms-transform: translate3d(...);
-webkit-transform: translate3d(...);
transform: translate3d(...);

将此应用于所有媒体查询和所有状态（隐藏/显示），它应该可以工作。

【讨论】：

成功了！似乎很奇怪，移动设备上的 chrome 需要供应商前缀，而不是桌面设备。

【解决方案2】：

您应该使用 CSS 媒体查询而不是转换

以 iphone 6 为例：

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 2)
{ }

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
{ }

然后在其中进行更改。

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

【讨论】：