1

そこで私は 1024x768 用の Web サイトをデザインしました... これが依然として支配的な解像度であることを示す世界的な統計に基づいて決定しました。

私自身も拡大してみましたが、見栄えがします。いくつかの写真でいくつかのトリックを使用しました。それらは高解像度ですが、ズームインするとぼやけていません。

しかし...現在、より多くの人がより高解像度の画面を使用しているため、開いてズームインする方法がわからない人は誰でも小さなページを見るでしょう. まだユーザーにズームインさせるのは正しくないので、これを修正したいと思います...

ビューポートに応じて、ユーザーごとに開いたときにページをスケーリングする方法はありますか?

ユーザーの現在の見方: http://i.stack.imgur.com/XBqiQ.jpg

私がそれをどのように表示し、ユーザーに表示してもらいたいか: http://i.stack.imgur.com/xNTIF.png

ズームとスケーリングに関連して見つけた唯一のものは、画像のみでした...

追加の編集:

私に与えられたものに対する私に与えられた答えに応えて、私はそれをテストしなかったので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のスライダーが押されて移動します。

クロムでは、この方法で iframe をズームしません。

これに関するアイデアはありますか？

4

1 に答える 1

0

jQuery を使用していると仮定すると (jQuery がなくても実行できますが、クロスブラウザーの互換性のためにコードがより簡潔になります)、次のことができます。

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

これにより、body の zoom プロパティが、ブラウザー ウィンドウがデザインよりも広い比率に設定されます。すべてのブラウザーが css zoom をサポートしているわけではないことに注意してください。

ただし、これは実際には少し厄介なハックです。それを行う「最新の」方法は、レスポンシブ Web デザインを使用して、クライアント ブラウザーの幅に関係なく優れたエクスペリエンスを提供することです。

于 2013-03-17T22:46:55.540 に答える