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建议：手动修复比例后的所有元素。

Answer 2

这很容易，因为大多数百分比值都相对于视口所以可以使用普通的HTML / CSS来完成。

你只需要在CSS中为每个对象定义一些宽度和高度的相对值，比如width:30%; height:30%;

但是你不能用绝对值放置对象，否则它们会移动。因此，您还需要left:30%; top:10%;之类的百分比，而不必忘记设置position:relative

更重要的是，所有容器div的边缘和填充（甚至是边界;） - 甚至是身体 - 也需要相对或零，否则对象也会移动......

这是一个带图像的工作代码示例（您也可以使用百分比大小而不是img定义另一个div）：

<body style="margin:0px; border:0px; padding:0px">
    <div style="margin:5%; border:0px; padding:5%">
        <img src="my picture.jpg" style="width:30%; height:30%; position:relative; left:30%; top:10%;">
    <div>
</body>

（请注意，图片的百分比始终相对于视口而与图片大小无关）

<强>更新

我刚做了一些花哨的颜色：

<div style="margin:0px; border:0px; padding:2%; width:30%; position:absolute; top:10%; left:5%;">
    <div style="margin:0px; border:3px double #000000; padding:2%; width:90%;">aaa
    </div>
</div>
<div style="margin:0px; border:0px; padding:2%; width:30%; position:absolute; top:10%; left:35%;">
    <div style="margin:0px; border:3px double #000000; padding:2%; width:90%;">bbb
    </div>
</div>
<div style="margin:0px; border:0px; padding:2%; width:30%; position:absolute; top:10%; left:65%;">
    <div style="margin:0px; border:3px double #000000; padding:2%; width:90%;">ccc
    </div>
</div>

在这种情况下，身高取决于内容。在高效的环境中，您还应该删除边框，因为它们正在缩放。

如果你还想拥有不断调整大小的文本，你需要使用一些javascript函数，因为那些新的CSS3相关字体实际上效果不好。

更新2：

现在我知道你的意思了：由于元素本身的大小控制，你想使用绝对值。

因此，您需要在服务器上计算所需的相对值，并将它们发送到客户端。但是这仅适用于JS，因为您需要从浏览器获取浏览器解析信息并将它们以XMLHttpRequest发送到服务器。然后你可能使用innerHTML来构建标题，这是最好的方法（“Facebook方式”）。而且因为你使用相对值，所有问题都解决了......而且图形甚至比任何（其他）JS解决方案都要快得多。

但是，您还需要在静态加载时停用Javascript的解决方案......然后它仍然会放大/缩小，这是不可避免的。但如果有另一种获取浏览器视口的方式而不是JS，请告诉我。 ;）

P.S。 由于我在这篇文章中得到了很多赞成票，所以来自downvoters的任何评论都非常感谢，谢谢。

Answer 3

使用iframe 非常笨重但解决了你的问题 :)毕竟，它们是HTML5规范的一部分。

您应该可以将不同的视口属性应用于单独的文档 - 将html与 stuff 标题和内容 iframe一起使用：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport"
          content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  </head>
  <body>
    <header>stuff that you want to be "fixed"</header>
    <!-- #content document will have different viewport meta applied
         it should also be sized appropriately -->
    <iframe id="content" />
  </body>
</html>

这似乎是一个比我最初的建议更有吸引力的选项，即将标题和内容设置为容器html中的单独iframe。

Answer 4

由于没有可靠的方法来实现您在所有浏览器中所要求的内容，我将假设您的目标是移动Webkit浏览器。

首先，您需要the detect-zoom package。

接下来，您需要使用设备像素比来调整要保持固定大小的元素的大小：

(function(){

    var el = document.getElementById('yourDiv'),
        ratio = detectZoom.device(),
        theWidth = el.offsetWidth,
        theHeight = el.offsetHeight;
    window.addEventListener('resize', function(){
        if(ratio >= 1.0){
            theWidth = Math.round( theWidth/ratio );
            theHeight = Math.round( theHeight/ratio );

        }else{
            theWidth = Math.round( theWidth * ratio );
            theHeight = Math.round( theHeight * ratio);

        }

        ratio = detectZoom.device();
        el.style.height = theHeight + "px";
        el.style.width = theWidth + "px";

    });

})(window);

缩放后，修复特定元素的大小

4 个答案: