加載時縮放/縮放頁面，以使用戶盡可能看到我的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 。

但是，這確實有點討厭-做到這一點的“現代”方法是使用響應式網頁設計 ，無論客戶端瀏覽器的寬度如何，都可以提供良好的體驗。