缩放/缩放页面上的负载为用户是一样宽看到我的wordpress网站的图片

Zoom/scale page on load for users to be as wide see my images of wordpress website

本文关键字：缩放 一样 我的 网站 wordpress 负载 用户      更新时间：2023-09-26

所以我设计了一个1024x768的网站…我根据全球统计数据做出的决定，显示这仍然是主要的解决方案。

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

然而

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

是否有一种方法可以根据每个用户的视口在打开时缩放页面?

用户现在看到的:https://i.stack.imgur.com/XBqiQ.jpg

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

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

额外的编辑:

Ok回应给我的答案是什么给了我没有在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与此方法。

对此有什么想法吗?

假设您正在使用jQuery(您可以不使用jQuery，但它使代码更简洁的跨浏览器兼容性)，您可以这样做:

$("身体"). css("放大",(窗口)美元.width ()/768);

这将正文的缩放属性设置为浏览器窗口比设计宽的比例。注意，并非所有浏览器都支持css缩放。

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

相关文章：