0

私はすべてのインターネットをナビゲートして解決策を探しましたが、この問題は非常に難しいようです. ユーザーの画面解像度を検出する方法については、多くのチュートリアルがあります。これは、innerWidth と innerHeight で行われます。私の質問は次のステップです。この情報をウェブサイト全体に適用するには、どのコードが必要ですか?!

それでは、innerWidth と innerHeight の値を取得したら、この情報をどのように使用して Web レイアウト全体に適応させるのでしょうか?!?!

写真をロードして画面解像度に適応させるこのようなコードがありますが、機能します。しかし、このコードを変換して、Web 全体をユーザーの画面解像度に適応させるにはどうすればよいでしょうか? html にタグ付けする必要がありますか?!?! これどうやってやるの？！？！

PS 解像度が 1440x900 のコンピューターを使用しています。この解像度では問題ないように見えますが、解像度を小さくしたり大きくしたりすると、壊れてしまいます...

$(window).load(function() {
    var randomImages = ['img1','img2','img3','img4','img5'];
    var rndNum = Math.floor(Math.random() * randomImages.length);

     var $win = $(this);
     var iMac = $(window).width() > 1920 ? '_imac' : '';
     var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + iMac + '.jpg').css({'position':'fixed','top':0,'left':0});
        function resize() {
            if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
              $img.css({'height':'100%','width':'auto'});
            } else {
              $img.css({'width':'100%','height':'auto'});
            }
        }
        $win.resize(function() { resize(); }).trigger('resize');
    });
4

1 に答える 1

-1

セットdocument.documentElement.style.maxHeightしてdocument.documentElement.style.maxWidth

実際、あなたの質問を読み直すと、「ズーム」のようなものを求めています。これは、場所と場所body {transform: scale(sw, sh)}
(または幅のアスペクトが正しいバージョン、または変更したくない場合) で行うことができます。 it)はまだ完全には実装されていないため、、 、およびsw$win.width() / 1440sh$win.height() / 9001
transform-webkit-transform-moz-transform-o-transformtransform

于 2012-08-23T14:12:16.537 に答える