javascript - 缩放时，固定特定元素的大小

Question

当我在手机上查看我的网站时，我可以防止它调整大小/缩放

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

但是，我希望能够调整大小，但是否可以让某些元素保持固定比例？

基本上，如果我有

<header>stuff</header>
<div id="content">
    Content
</div>

当我在手机上放大时，“内容”会像往常一样放大，但页眉会保持固定大小。标题的字体大小相同，外观相同等。

文本太多，我无法考虑使用图像作为替代选项。

基本上，我想为特定元素设置一个 user-scalable=no 东西。

JS/jQuery 方法都可以，是的，我知道其中一种解决方案是手动调整所有内容的大小，或者将所有内容设为百分比，但这很丑陋，不是我想要的。

Answer 1

不幸的是，除非您使用自定义的“可缩放区域”，否则您不能仅将某些元素保持其原始大小。

自定义可扩展区域 我的意思是图书馆喜欢 iScroll 5创造。这允许用户 pinch-to-zoom only specific parts of the page, (open on mobile)而不是像移动浏览器通常那样显示整个页面。

通过使用像 iScroll 这样的东西，您可以在其可缩放区域内缩放您想要缩放的内容，而在它之外的其他内容:这样它就不会被缩放。

要么是那样，要么是 Trendy 建议的:在缩放后手动修复所有元素。