Question

我有一个隐藏的购物车和菜单，这些固定的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永久地覆盖屏幕。有办法解决这个问题吗？

Answer 1

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

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

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

Answer 2

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

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

CSS转换不适用于移动设备

2 个答案: