0

常に収まるようにブラウザ ウィンドウのサイズを変更したい Web サイトがあります。現在のウィンドウ幅を全画面ウィンドウ幅で割った比率でcss変換スケールプロパティを使用してみました。再スケーリングされますが、コンテンツの左右に白いブロックが残るため、何か問題があるに違いありません (そのため、サイトが縮小しすぎてウィンドウの中央に表示されます)。JavaScript コードは次のとおりです。

$(window).resize(function(){
           var ratio = $(window).width()/1340;
                $('body').css('transform','scale('+(ratio)+')');
                $('body').css('-ms-transform','scale('+(ratio)+')');
                $('body').css('-moz-transform','scale('+(ratio)+')');
                $('body').css('-webkit-transform','scale('+(ratio)+')');
   });

ページをウィンドウに合わせる (またはスケーリングを適切に行う) より良い方法はありますか?

4

4 に答える 4

2

ウェブサイトをモバイル フレンドリーにするには、メディア クエリを使用するか、Bootstrap、Foundation などのフロントエンド フレームワークを使用してレスポンシブにすることを検討する必要があります。

または、ウェブサイトを水平方向にスケーリングしてユーザーの画面に合わせないようにスケーリングしたい場合 (UI コンポーネントがどれほど小さくても)、head セクションに次のメタ タグを追加することでそれを行うことができます。

<meta name="viewport" content="width=device-width, initial-scale=1">

ブラウザは、モバイル画面の幅に合わせて Web サイトのサイズを維持する必要があります。

それが役立つことを願っています。

于 2016-12-17T11:05:34.853 に答える
0

これを使用して、コンテンツ全体をその中に入れることができます

#wrapper{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
}
于 2013-10-25T20:30:40.560 に答える
0

使用する

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Html の head セクションと

@media only screen and
(min-device-width : screen px) and
(max-device-width : screen px) {
    #id{style}
}

CSSで。

于 2016-12-17T11:43:04.953 に答える
0

やりたいことは、レスポンシブおよびアダプティブ メソッドを使用して Web サイトを構築することです。このリンクが役立つかどうかを確認してください! http://www.imediaconnection.com/content/33435.asp#singleview

于 2013-10-25T20:38:39.767 に答える