1

我正在用 html5 和 jQuery 制作一些小游戏。它们可以在不同的平台上播放，例如 pc 或 iOS 或 Android。我想以不同的分辨率显示具有固定纵横比的完整内容。

我可以使用 .width() 和 .height() 缩放特定对象，但我不确定是否有更好的方法来自动缩放整个内容，而不是访问每个组件并一一更改它们的比例和位置.

谢谢你。

4

6 回答 6

3

你可以试试 css transform:scale()

于 2012-12-21T09:35:33.083 回答
2

要使用 JS 和 CSS 动态缩放页面内容，您可以transform: scale在 CSS 中设置属性。这是将应用跨浏览器缩放的示例代码：

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

IMO 以百分比（通过 CSS）给出高度和宽度将比每次都更改它更好。

于 2012-12-21T09:34:14.283 回答
1

太棒了@Arvind Bhardwaj！

顺便说一句，在 JQuery 上：

    var nIndexZoom = 1;
    if($someDiv.css('transform') == 'none' || $someDiv.css('transform') == 'matrix(1, 0, 0, 1, 0, 0)')
        nIndexZoom = 0.5
    //Go for it!
    $someDiv.css({
        'transform'                   : 'scale('+nIndexZoom+')',
        '-webkit-transform'           : 'scale('+nIndexZoom+')',
        '-webkit-transform-origin'    : '0 0',
        '-moz-transform'              : 'scale('+nIndexZoom+')',
        '-moz-transform-origin'       : '0 0',
        '-o-transform'                : 'scale('+nIndexZoom+')',
        '-o-transform-origin'         : '0 0',
        '-ms-transform'               : 'scale('+nIndexZoom+')',
        '-ms-transform-origin'        : '0 0',
    });

发送！

于 2013-10-22T02:36:26.297 回答
0

You could have all your elements using rm (or rem, I guess) instead of pixels for their heights and widths.

Then you could use javascript to change the font-size for the html-tag (standard is 62.5% for rem), and everything should scale up or down.

于 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 回答