加载时缩放/缩放页面，以使用户尽可能看到我的wordpress网站图片

Question

因此，我设计了一个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。

有什么想法吗？

Answer 1

假设您使用的是jQuery（您可以在不使用jQuery的情况下执行此操作，但是它使代码更易于跨浏览器兼容），您可以执行以下操作：

$（'body'）。css（'zoom'，$（window）.width（）/ 768）;

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

但是，这确实有点讨厌-做到这一点的“现代”方法是使用响应式网页设计 ，无论客户端浏览器的宽度如何，都可以提供良好的体验。