1

所以我设计了一个 1024x768 的网站……我根据全球统计数据做出的决定表明这仍然是主要的分辨率。

我自己放大了，看起来很棒。我在一些图片上使用了一些技巧，它们的分辨率更高，但如果放大它们就会缩小，它们并不模糊。

然而......现在任何打开但不知道如何放大的人都会看到一个很小的页面，因为越来越多的人使用更高分辨率的屏幕。仍然让用户放大是不对的，我想解决这个问题......

有没有办法根据每个用户的视口在打开页面时缩放页面？

用户现在如何看待它：http: //i.stack.imgur.com/XBqiQ.jpg

我如何查看它并希望用户查看：http: //i.stack.imgur.com/xNTIF.png

我能找到的唯一与缩放和缩放有关的东西仅适用于图像......

附加编辑：

好的，作为对给我的回答，给我的东西在 Firefox 中不起作用不确定 IE，因为我没有测试它，但这正是我想要的！

$('body').css('zoom',$(window).width()/1200);

有什么建议么？

我在使用它时也遇到的问题是我拥有的 iframe：我在 iframe 页面上使用它来加载论坛并将其放入 wordpress 页面的内容中。此代码自动调整其大小并将其置于顶部。

<script language="javascript" type="text/javascript">
 function resizeIframe(obj)
 {
   obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
   obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';                        
 }
 </script>

[iframe id="frmid" frameborder="0" padding="0" margin="0" onload="javascript:resizeIframe(this); window.parent.parent.scrollTo(0,0)" src="http://muslimbodybuilding.com/Forum/" scrolling="no"]

请参阅评论中的屏幕截图我无法发布另一个链接限制我......

=======================

我还遇到了另一个在 Firefox 中工作的类似解决方案

<script type="text/javascript">
jQuery(window).load(function() {
  var currentWidth = jQuery(document.body).width();
    var targetWidth = 1100; // experiment for your self
    var scrollWidth = 0; // need to make it dynamic --- was 20
    // if the screen is not bigger than the target, then don't mess with zooming
    if (currentWidth > targetWidth) {
      if (typeof document.body.style.transform != "undefined")
        document.body.style.transform = currentWidth / targetWidth;
      else if (typeof document.body.style.MozTransform != "undefined") {
        document.body.style.MozTransformOrigin = "left top";
        document.body.style.MozTransform = 'scale(' + currentWidth / targetWidth + ')';
      }
      else if (typeof document.body.style.WebkitTransform != "undefined")
        document.body.style.WebkitTransform = 'scale(' + currentWidth / targetWidth + ')';

      jQuery(document.body).width(targetWidth - scrollWidth);
   }
});
</script>

它也会放大 iframe，但是当我不断更改页面时，我的 facebook 滑块会被推动并四处移动。

在 chrome 中，它仍然不会使用这种方法缩放 iframe。

对此有什么想法吗？

4

1 回答 1

0

假设您使用的是 jQuery（您可以在没有 jQuery 的情况下执行此操作，但它使代码更加简洁以实现跨浏览器兼容性），您可以执行以下操作：

$('body').css('zoom',$(window).width()/768);

这会将主体的缩放属性设置为浏览器窗口比您的设计更宽的比例。请注意，并非所有浏览器都支持 css zoom。

然而，这确实有点令人讨厌 - 这样做的“现代”方式是使用响应式网页设计，无论客户端浏览器的宽度如何，都能提供良好的体验。

于 2013-03-17T22:46:55.540 回答