前端如何实现div在固定角度缩放
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端如何实现div在固定角度缩放相关的知识，希望对你有一定的参考价值。
参考技术A 我们可以通过前端CSS3 中3D 转换来对元素进行缩放，具体会用到以下几种方法：1.transform属性，transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。目前为止以下浏览器支持该属性：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10。
2.旋转方法，通过rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。
3.缩放，使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。比如transform：scale（0.5），通过设置不同方向X 轴、 Y 轴、Z轴的值来定义缩放转换。
禁用 div 缩放，但允许缩放页面（备用 div）
【中文标题】禁用 div 缩放，但允许缩放页面（备用 div）【英文标题】：Disable zoom on a div, but allow zoom on the page (an alternate div) 【发布时间】：2012-12-02 22:21:39 【问题描述】：有没有办法禁用 div 或网站上任何特定元素的缩放？例如，如果我希望页面是可缩放的，而不是#Header div，有没有办法让一个可缩放，而另一个不可缩放？
基本上，当您在移动设备上缩放时，它也会缩放标题，但我希望标题始终为固定大小（不可缩放）。
我知道您可以使用此代码来禁用整体缩放：
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
【问题讨论】：
如果您放大整个页面或特定于您的标题？或者如果您仅触摸标题或总页，则更进一步？而且，顺便说一句：你为什么想要那个？访问者看不到整页……有点蹩脚，嗯？ 遇到了同样的问题并且能够（大部分）解决它：***.com/questions/27983673/… 【参考方案1】：遇到同样的问题，最终禁用平移/缩放
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
并通过这个伟大的库选择性地重新启用它
https://soulfresh.github.io/pan-z/?path=/docs/pan-z--pan-z
无需太多配置即可使用。
我的html结构如下
<body>
<header>Sticky unzoomed header</header>
<main id='main'>Zoomable content</main>
</body>
然后我在主要元素上启用了全景缩放
const PanZ = require('@thesoulfresh/pan-z')
new PanZ().init(document.getElementById('main'))
【讨论】：
【参考方案2】：如果没有巧妙的技巧，您将无法做到这一点。
但是，您可以（并且应该）使用以下 CSS 来修复移动设备上的缩放问题：
header
position: fixed;
...
@media only screen and (max-width: 720px)
header
position: absolute;
此代码在显示宽度小于或等于 720px 时启用position: absolute，并且页眉成为页面的一部分，而不是固定在顶部。
【讨论】：
理论上是可以的，看看这家伙的回答：***.com/questions/15233076/… 这是一个类似的问题和相同的解决方案吗？ ***.com/questions/29674936/… >> 不适合我 使用this 检测触摸和混合触摸/鼠标设备，然后将标题或固定元素的样式值更改为absolute。像这样在移动或触摸输入设备上进行缩放时，固定元素不会破坏网站的其余部分，而是可以根据浏览器和操作系统以及大多数用户规范（缩放级别等）本机缩放。
我什至会说，通常在桌面以及移动和混合触控/鼠标设备的用户缩放设置上固定为绝对值。未来证明，让浏览器和操作系统处理缩放，用户满意，可访问性授予，完成。请记住，网站在缩放时看起来响应不是您的责任！这是用户的决定，因此用户希望放大页面的每个部分，而不仅仅是内容。所以从缩放中排除某些 div 是不好的。
我试过了，但没用@AleksejKomarov。你能提供一个可运行的例子吗？ （不在 SO sn-p 中，因为 SO sn-ps 在 Android 手机上不可运行 - 我已经发布了关于此的元 SO 请求）【参考方案3】：
如果您使用 angular，有一种方法可以为您的标题 div 提供一个 id，然后在控制器中编写以下代码：
document.getElementById("viewport").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=1');
我在我的项目中使用过，效果很好..
【讨论】：
【参考方案4】：简而言之，你当然可以做到。
您可以捕获窗口调整大小事件并根据从各种新窗口和内部宽度和高度属性计算的 dpi 变化调整浮动 div 的大小。
因此，当您放大时，您希望缩小浮动 div 以使其保留原始 dpi，反之亦然。
这将是一个史诗般的小提琴 - 很快重新审视这个答案，因为我可能不得不做这样的事情。已经注意到一些跨浏览器与 dpi 的不一致，所以是的，很有趣。
【讨论】：
你有一个可运行的例子@DominicCerisano吗？将非常有用，因为接受的答案并没有真正起作用（请参阅imgur.com/a/Yumvk）。 正如我所提到的，这将需要大量工作，因为它需要为每个浏览器（Chrome、MOZ 等）和平台（PC、移动设备等）单独实现。 kindof 打破了缩放的意图。如果我（用户）想要缩放某些东西，这是我的决定，你（开发者）阻止我这样做让我想尽快离开页面 它实现了 OP 描述的预期缩放。【参考方案5】：我认为你不能直接这样做。一种可能的选择是通过 js 事件检测缩放并相应地缩放元素。
另一种选择是“打破” CTRL 键以禁用缩放您的网站，但这只是一个很大的禁忌。
【讨论】：
以上是关于前端如何实现div在固定角度缩放的主要内容，如果未能解决你的问题，请参考以下文章