and*_*myr 5 webkit mobile-safari ipad
在下面的HTML页面中,我正在使用a缩放块-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>
and*_*myr 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>