在iPad上使用移动Safari进行-webkit-transform缩放问题

时间:2010-09-17 11:03:45

标签: ipad webkit mobile-safari

在下面的HTML页面中,我正在使用-webkit-transform缩放块。变换将块从其初始大小缩放到双倍大小。

这适用于Safari和OSX上的Chrome。

但是,在IPad(模拟器和设备)上,缩放从单个点开始,而不是从图像的原始大小开始。

正如您在示例中所看到的,我设置了viewport元标记,但它什么也没做。

任何人都可以确认这是一个错误,是否有解决方法?

<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0, minimum-scale=1.0" />

<style type="text/css">

#block {
    position:absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 400px;
    -webkit-transition: -webkit-transform 3s ease-out;
    background-color: blue;
  }

.zoom {
  -webkit-transform: scale(2);
}
</style>
</head>

<body>
  <div id="block" onclick="className='zoom';">The Block</div>
</body>
</html>

2 个答案:

答案 0 :(得分:13)

我自己设法解决了这个问题。

解决方案很简单:只需确保元素缩放到原始大小即可:

-webkit-transform: scale(1);

但有一个技巧。如果您(如下所示)向#id选择的元素添加一个类,则#id的优先级高于类,除非您告诉浏览器它是重要的,否则它将不会显示

-webkit-transform: scale(2) !important;

解决此问题的另一种方法是不按#id选择元素,而是按类(.block)或按元素(div)选择元素。优先级低于id的任何东西。

解决方案如下:

<style type="text/css">

#block {
    position:absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 400px;
    -webkit-transition: -webkit-transform 3s ease-out;
    background-color: blue;
    -webkit-transform: scale(1);
  }

.zoom {
  -webkit-transform: scale(2) !important;
}
</style>
</head>

<body>
  <div id="block" onclick="className='zoom';">The Block</div>
</body>
</html>

答案 1 :(得分:0)

我很晚才遇到这个问题。解决方案是不使用important,而是通过更改选择元素的方式。这是因为ID选择器比类选择器更接近和强大。

#block.zoom {
  -webkit-transform: scale(2);
}