1

HTML5とjQueryでミニゲームを作っています。それらは、PC、iOS、Android などのさまざまなプラットフォームで再生できます。さまざまな解像度で固定縦横比のコンテンツ全体を表示したい。

.width() と .height() を使用して特定のオブジェクトをスケーリングできますが、すべてのコンポーネントにアクセスしてそれらのスケールと位置を 1 つずつ変更する代わりに、コンテンツ全体を自動的にスケーリングするより良い方法があるかどうかはわかりません.

ありがとうございました。

4

6 に答える 6

3

css transform:scale()を試すことができます

于 2012-12-21T09:35:33.083 に答える
2

JS と CSS を使用してページ コンテンツを動的にスケーリングするには、CSS でtransform: scaleプロパティを設定します。クロス ブラウザー スケーリングを適用するサンプル コードを次に示します。

HTML:

<html>
<body>
    This is normal body text. <br />
    <img src="https://lh6.googleusercontent.com/-IV-xOecyuK0/UFGqw_mpjTI/AAAAAAAAATI/_gEx7d4wKqw/w300-h83-p-k/webspeaks.png" />
    <br />
    <br />
    <div id="zoom">
        <a href="#" title="Normal" class="default">Default</a>
        <a href="#" title="Medium" class="large">Large</a>
        <a href="#" title="Large" class="larger">Larger</a>
    </div>
</body>
</html>

jQuery:

$("#zoom a").click(function(e) {
        var $body = $("body");
        var newClass = $(this).attr('class');
        $body.removeClass("default large larger").addClass(newClass);
       e.preventDefault();
    }
);

CSS:

body.default {
    transform: scale(1);
    -webkit-transform: scale(1);
    -webkit-transform-origin: 0 0;
    -moz-transform: scale(1);
    -moz-transform-origin: 0 0;
    -o-transform: scale(1);
    -o-transform-origin: 0 0;
    -ms-transform: scale(1);
    -ms-transform-origin: 0 0;
}
body.large {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -webkit-transform-origin: 0 0;
    -moz-transform: scale(1.5);
    -moz-transform-origin: 0 0;
    -o-transform: scale(1.5);
    -o-transform-origin: 0 0;
    -ms-transform: scale(1.5);
    -ms-transform-origin: 0 0;
}
body.larger {
    transform: scale(2);
    -webkit-transform: scale(2);
    -webkit-transform-origin: 0 0;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
    -o-transform: scale(2);
    -o-transform-origin: 0 0;
    -ms-transform: scale(2);
    -ms-transform-origin: 0 0;
}

ライブデモ

于 2012-12-21T09:51:41.833 に答える
1

高さと幅を (CSS を介して) パーセンテージで指定する IMO は、毎回変更するよりも良い考えです。

于 2012-12-21T09:34:14.283 に答える
0

高さと幅のピクセルの代わりにrm(または、私が推測する)を使用して、すべての要素を持つことができます。rem

次に、javascript を使用して html タグのフォントサイズを変更できます (標準は rem の 62.5% です)。すべてを拡大または縮小する必要があります。

于 2012-12-21T09:39:11.227 に答える
0

おそらくユニバーサルセレクターを使用した「検索」*が機能しますか？* が扱いにくい場合は、必要に応じて個々の要素を選択してみてください。

var scaling = .5;
$('#someElement').find('*').each(function () {
    var fSize = Number($(this).css('fontSize').replace(/[^0-9\.]+/g, ""));
    $(this).outerWidth($(this).outerWidth() * scaling);
    $(this).css('fontSize', fSize * scaling));
});
于 2014-03-02T16:21:08.513 に答える