gpt4 book ai didi

ipad - iPad 上移动 safari 的 -webkit-transform 的缩放问题

转载 作者:行者123 更新时间:2023-12-02 20:46:15 26 4
gpt4 key购买 nike

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

这可以在 OSX 上的 Safari 和 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>

最佳答案

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

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

-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>

关于ipad - iPad 上移动 safari 的 -webkit-transform 的缩放问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3734740/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com