0

以前、質問の言い方が間違っていました。私の意図は、ユーザーのブラウザー設定の解像度を変更することではありませんでした。私は主に、最小の一般的な解像度サイズに合わせてページをレイアウトし、ユーザーの解像度の設定が高い場合は解像度に合わせてズームインしたいと考えています。たとえば、ユーザーの解像度が 800x600 の場合、Web サイトは私がデザインしたとおりに表示されますが、ユーザーの解像度が 1280x800 の場合、Web サイトのレイアウトを変更せずにその解像度に合わせて Web サイトが拡大され、フォントとサイズが変更されます。 Web サイトの外観とレイアウトを維持しながら、すべてを大きくすることができます。方法がある場合、どうすればよいですか？前もって感謝します ：）

4

3 に答える 3

3

いいえ、ありません。これはクライアントにとって非常に迷惑です。ユーザーの解像度に合わせてサイトを変更する必要があります。コメントが示唆するように、レスポンシブにします。レスポンシブ Web デザインを検索すると、その方法に関する記事がたくさん見つかります。一部のことがセキュリティ上の問題になる可能性があるため、javascript で制限されることがあります (これはより煩わしいものです)。

Web を閲覧しているときに、訪問したすべての Web サイトがモニターの解像度を変更したとしたら、考えてみてください。

要約すると、非常に多くのサイトがユーザーの解像度に合うように設定している理由は、ユーザーの解像度を変更できないためです。

于 2012-12-21T19:25:21.350 に答える
0

以前の回答で他の人が述べたように、画面の解像度を変更することは悪い考えかもしれませんが (単に不可能ではないにしても)、コンテンツのスケールを変更して、ウィンドウにぴったり合うようにすることができます。

以下のコードは、正確に 1280x800 の解像度を持つデバイス用に設計した Web アプリケーション用に作成したものです。最終的に、1080p の画面でもときどき使用することにしたので、完全に収まるようにスケーリングが必要でした。これは、以下の私のコードが行うことです。

フルスクリーン API (このラッパー: http://sindresorhus.com/screenfull.js/ ) を使用して、ブラウザをボタンで全画面表示にし、この同じボタンが同時に自動スケーリングをトリガーします。ここで実際の例を見つけることができます: http://jsfiddle.net/QT5Nr/5/

このコードには現在jQuery 1.8.3とscreenfull.jsが必要ですが、それらがなくても動作するように簡単に変更できることに注意してください。jQuery オフセット関数をオーバーライドする理由を説明するために、コメントをそのまま残しました。jsFiddle でコードの一部をコメントアウトしてから、フレームのサイズを変更することで、なぜそれを行ったのかをテストすることもできます。

/*****************************************************************************************************************************************\
|**                                                     Scale elements to fit page                                                      **|
|*****************************************************************************************************************************************|
|** Because we created a static size layout for our target device other devices will not have a 100% sized layout. To fix this we       **|
|** change the scale of the body element so that it's contents fit exactly within the available window.                                 **|
|** In addition we have to override jQuery.fn.offset in order to fix problems where the offset returned by this function is exact to    **|
|** the current location of the element (with it's scale), while it has to be the exact location of the unscaled element.               **|
\*****************************************************************************************************************************************/
function EnableAutoScale() {
    function AdjustScale() {
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();

        var viewportWidth = $('#viewport').width();
        var viewportHeight = $('#viewport').height();

        var horizontalScale = windowWidth / viewportWidth;
        var verticalScale = windowHeight / viewportHeight;

        $(document.body).css('transform-origin', '0 0');
        $(document.body).css('transform', 'scale(' + horizontalScale + ', ' + verticalScale + ')');
        document.body.HorizontalScale = horizontalScale;
        document.body.VerticalScale = verticalScale;
    }

    $(AdjustScale);
    $(window).resize(AdjustScale);

    // Override offset so it continues working with the scale set above
    jQuery.fn.originalOffset = jQuery.fn.offset;
    jQuery.fn.offset = function () {
        var offset = jQuery.fn.originalOffset.apply(this, arguments);

        offset.left = offset.left / document.body.HorizontalScale;
        offset.top = offset.top / document.body.VerticalScale;

        return offset;
    };
}
$(function () {
    $('#fullscreen').click(function () {
        $('#fullscreen').hide();

        EnableAutoScale();

        if (screenfull.enabled)
            screenfull.toggle();
    });
});
于 2012-12-21T21:48:58.993 に答える