zooming 相关问题

JSBIN：https://jsbin.com/subipamero/edit?html,css,output HTML：这是 20 像素的文本这应该显示为 4px 大小的文本 (20px * .2) JSBIN：https://jsbin.com/subipamero/edit?html,css,输出 HTML： <div>This is 20px text</div> <div class="shrunk">This should appear as 4px size text (20px * .2)</div> CSS： div { font-size: 20px; margin: 20px; } div.shrunk { zoom: .2; } JSBIN 示例呈现两个 div。文本设置为 20px。然而，第二个 div 上设置了 zoom: .2。如果您在 Safari 和 Chrome 中并排打开这些内容，您会发现 Safari 中的缩放文本更大。如果您使用 Safari 中的缩放设置，您会发现有一个充当最小字体大小设置的东西，您根本无法将文本缩小得更小。有人知道为什么 Safari 会这样做吗？有没有办法克服这个问题？我应该注意，我没有将 Safari 首选项设置为“从不渲染小于 x 大小的类型”。问题是我正在设计一个信息亭，它会被卡在特定的长宽比上。但所使用的浏览器（全屏）的大小可能会有所不同（目前未知变量）。所以我只是使用一点 JS 来缩放内容以适应任何视口大小。在 Chrome 中，这意味着无论我将浏览器设置为什么大小，屏幕上的所有内容都会作为一个整体进行缩放，并且不会出现任何中断（除了它太小而无法阅读/查看）。但是在 Safari 中，由于这个奇怪的字体问题，当你缩小内容时，它很快就会崩溃。我猜 Safari 就是这样，我可能可以通过一些更周到的设计/布局更改来解决这个问题。但我很好奇 Safari 在这里做什么，如果它是已知的事情的话。更新：有人指出我这个关于使用-webkit-text-size-adjust: 100%的答案。这可能会“修复”移动 Safari 中的问题，但在桌面上不起作用。是的，Safari 似乎有一个下限，可以防止文本在值小于 zoom 时受到 0.5 的影响。我们可以从缩放文本的渲染结果中看到这一点 1~0.1: text at zoom:1.0 text at zoom:0.9 text at zoom:0.8 text at zoom:0.7 text at zoom:0.6 text at zoom:0.5 text at zoom:0.4 text at zoom:0.3 text at zoom:0.2 text at zoom:0.1 以下是该文本在三个 Mac 桌面浏览器中的呈现方式：铬野生动物园火狐几乎可以肯定，苹果选择这样做是出于可访问性的原因。当设计师假设所有观众的视力都和他们自己一样好时，文本太小而难以阅读是一个经常出现的问题。苹果非常重视可访问性，所以看到这个限制我并不感到惊讶。我并不是说我同意设置硬性限制，因为这对于某些 CSS 动画来说可能是一个问题，防止出现“淡出”类型的缩小效果，仅举一个例子。如何解决这个问题？我能想到几个选项。首先，必须问一个问题：为什么您希望设计中的文本太小而难以阅读？我能想到几个有效的用例：用例 1：类似图像的文本用法您的设计包含其他设计的缩略图 - 例如，您有一个宣传书籍的广告横幅。这本书的封面位于横幅上。这本书的封面上有一些文字太小而无法阅读，但我们仍然了解其要点，所以没关系。在这种情况下，请将书籍封面转换为图像（如果尚未转换为图像）。在某些情况下，将文本转换为 SVG 或其他图像格式是可以的。对于文本来说，矢量格式通常优于光栅格式。如果您的文本看起来那么小，那么它可能无法像普通文本一样发挥作用。考虑将其视为图像。用例 2：带有动画过渡的文本文本 zoom 属性将被动画化（如上所述）。在这种情况下，请考虑对其他 CSS 属性进行动画处理，例如 transform scale() translate(); 请注意，scale()具有不幸的副作用，即相对于其transform-origin偏移元素。这是没有办法的——这就是缩放的作用。而translate()往往需要与scale()配合使用来抵消定位变化。我暂时保留这个答案。但如果你能描述这个小文本的目的和功能，以及为什么你相信它不会给你的听众带来问题，我可能会有更多的想法。也许有更好的方法来完成您正在尝试做的事情。

css safari zooming font-size

回答 1 投票 0

关闭弹出窗口后缩放时出现传单错误

我已经在这里看到了同样的问题：StackOverflow 但没有一个答案有帮助，或者至少我不明白。如果我通过单击在地图上放置一个新标记，然后通过 cl 删除该标记...

javascript leaflet popup vuejs3 zooming

回答 2 投票 0

有没有办法指定浏览器的最小和最大缩放级别？

最近的浏览器允许使用 CTRL +- 、CTRL-鼠标滚轮以及触控板上的两根手指捏合手势来更改缩放级别。虽然我自己觉得这个功能非常方便（各种

javascript css reactjs browser zooming

回答 1 投票 0

如何为与其容器比例不同的图像创建平移和缩放效果？

我有以下简单的代码来平移和缩放图像（从[此处]稍作修改：（https://www.cssscript.com/image-zoom-hover-effect/）函数 imageZoom(容器, img) { 反对...