logo标签列表

当进行缩放时，为特定元素固定大小

javascriptjqueryhtmlcss
5
当我在手机上查看我的网站时，我可以通过以下方式防止它被缩放：
<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方法都可以，是的，我知道解决方案之一是手动调整所有内容大小或将所有内容设为百分比，但那很丑并且不是我想要的。
我刚刚读了你的最后一句话，但我不认为我的解决方案看起来很丑，是吗？ ;) 说实话：这关乎GUI的外观，而不是代码，而HTML比包括JS在内的任何过程式语言都要好看得多...所以我不确定你提问的动机是什么。然而，在编程中，事情必须按照某种方式完成，无论我们喜欢与否。 - Marcus
当然，百分比是一种完全有效的方法，但当我有非常复杂的布局，有数百个元素时，这并不是首选方法。这是我所知道的最简单的解决方案，但这个问题是为了看看是否有更简单的方法。 - Overcode
我不太愿意建议这个作为答案，但你尝试过iframes吗？毕竟它们是HTML5规范的一部分，你应该能够将不同的viewport属性应用于单独的文档——想象一下带有两个iframes的“容器”html，一个用于“杂项”，另一个用于“内容”。 - Oleg
@o.v. 太好了！我的意思是它相当笨重，但它很简单并解决了我的问题。谢谢！如果你把它发布为答案，我会很乐意奖励你的赏金。 - Overcode
@Overcode: 完成。你可以尝试将“stuff”标题移动到容器HTML中使其工作...因为页面上有两个iframes就太多了 :) - Oleg
4个回答
1

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

所谓自定义可缩放区域，指的是像 iScroll 5 这样的库所创建的内容。这允许用户仅针对页面的特定部分进行捏合缩放（在移动设备上打开），而不像移动浏览器通常做的那样缩放整个页面。

通过使用类似 iScroll 的东西，您可以将想要缩放的内容放入其可缩放区域内，而将其余部分放在外面：这样它就不会被缩放。

或者，就像 Trendy 建议的那样：在缩放后手动修复所有元素。

我更喜欢o.v.的建议，但那个库也很有趣。+1 - Overcode
0
使用iframe有点笨重，但可以解决你的问题 :) 毕竟它们是HTML5规范的一部分。
你应该能够对不同的文档应用不同的视口属性 - 想想带有“stuff”标题和“content”iframe的HTML：
<!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>

这似乎比我的原始建议更具吸引力，原建议是将标题和内容都设置为单独的 iframe 放置在容器 HTML 中。

1
太棒了。是的，根据你之前的评论，两个 iframe 就太多了。实际上，我只需要一个部分固定比例即可。谢谢！ - Overcode
1
从技术上讲，两个iframe就太多了:)我很高兴这有所帮助。 - Oleg
你确定吗？如果我没记错的话，iframe 中的页面无法单独缩放。 - fregante
0

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

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

但是你不能使用绝对值来放置对象，否则它们就会移动。所以你还需要使用像left:30%; top:10%;这样的百分比，同时不要忘记设置position:relative

更进一步，所有容器div的marging和padding（甚至可能包括边框；）也需要是相对或零，否则对象也会移动...

这是一个带有图像的工作示例（你也可以定义另一个具有百分比大小的div而不是img）：

<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以外的方式获取浏览器视口，请告诉我。;)

附言：由于我在这篇文章中得到了很多负评，所以任何来自负评者的评论都是非常感激的，谢谢。

我知道这是一种有效的方法，也是我能想到的最简单的解决方案，但我正在寻找更简单的解决方案。也许不存在，但这仍然不是我要找的。 - Overcode
实际上，我的解决方案确实非常简单。它比纯JS做起来要简单得多（想想所有的调试和跨浏览器问题）。你只需要学习如何使用XMLHttpRequest，并通过innerHTML加载返回的字符串（这只是“几乎是AJAX”，因为纯AJAX只有XML，现在被JSON取代...但你甚至不需要那些数据格式，你可以只获取纯HTML并使用innerHTML更新页面）。 - Marcus
当我有数百个 div 时，这种解决方案并不简单。但是撇开这点不谈，就像我说的一样，它能够运行，我知道它能够运行，只是想问问是否有更简单的方法。 - Overcode
当你说它可以工作时，你是否尝试过实现它？因为我正在尝试实现它，而且并不像你想象的那么简单...事实上，这是一件相当复杂的事情（大约100行或更多的代码，特别是字体重绘是棘手的）。话虽如此：也许你最好使用像jQuery这样的现有框架。 - Marcus
@o.v：在我的示例中，我设置了border:0px，这是正确的...如果块大小是百分比值，则边距/填充也将相对于视口。请查看我的代码示例。干杯 - Marcus
显示剩余3条评论
-3

由于在所有浏览器中都没有可靠的方法来实现您所要求的功能，我假设您正在针对移动Webkit浏览器进行操作。

首先，您需要使用detect-zoom包。

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

(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);
1
这不是我想要的。我希望如果你缩放而不是调整页面大小，div仍然保持相同的大小。基本上，如果你按Ctrl +或在手机上放大，它看起来仍然一样。 - Overcode
更新了，希望有所帮助。 - Trendy
这只会调整 div 的大小，但是 div 内的元素（如文本）仍然会被调整大小。 - Overcode
没有实际源代码，我无法提供完整的答案。我认为你可以看到发生了什么，并应用解决方案以满足你的需求。例如，你需要使这个适用于所有子元素。http://jsfiddle.net/5nhe4/ <--- 这应该让你了解发生了什么。你还需要调整元素本身和文本的大小。 - Trendy
2
是的，但我指定手动调整大小并不是我要找的。 - Overcode
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接