Question

我之前说错了我的问题，我的意图是不改变用户浏览器设置的分辨率。我主要想要将页面布局为最小的常见分辨率大小，并且如果用户的分辨率具有更高的设置，则可以放大以适应分辨率。就像用户的分辨率是800x600一样，我的网站看起来就像我设计的那样，但如果用户的分辨率是1280x800，我的网站将放大以适应该分辨率而不改变我的网站布局，这将使字体和大小在保持网站外观和布局相同的同时更大的一切。如果有办法，我该怎么办？在此先感谢：）

Answer 1

不，没有。这对客户来说非常烦人。您必须更改您的网站以适应用户的分辨率。正如评论所示，让它具有响应性。如果您搜索响应式网页设计，您会发现很多关于如何做到这一点的文章。我们有时会限制javascript，因为有些东西会出现安全问题（这会更令人烦恼）。

想一想 - 在浏览网页时 - 如果每个网站都是你访问改变了显示器的分辨率！

总而言之，这么多让其网站符合用户分辨率的原因是因为您无法更改用户的分辨率。

Answer 2

你不能这样做，你不应该这样做。

您必须尽可能地使您的网站适应用户当前的浏览器窗口大小。您无法控制浏览器窗口大小或屏幕分辨率，即使您这样做，在没有用户理解和启动此类更改的情况下更改这些内容也是不专业和不礼貌的。

浏览器不是计算机。它只是众多应用程序中的一个。你不知道用户在他的屏幕上做了什么 - 如果他在一个角落里播放视频并希望他的浏览器窗口准确到达目的地怎么办？

如果他视力受损并且他的浏览器像疯了一样放大了怎么办？我知道有人戴着厚厚的眼镜，使用屏幕上的屏幕缩放辅助功能盒，并且仍然靠近屏幕大约6英寸，以便能够看到任何东西。你不帮他改变关于他的浏览器和屏幕的布局。

任何网站都以某种方式改变了我的浏览器适合屏幕的方式，改变了浏览器的分辨率，或改变了显示器的分辨率：

立即添加到我的“永远仇恨列表”中，再也没有访问过。
值得告诉我所有的技术朋友，让他们笑一笑
提交给thedailywtf.com，让未来的人们惊叹于
在我的下一篇博客文章中，关于软件不是傲慢的邪恶，而不是表现得像是拥有用户的电脑，这是我以前从未写过博客的主题，但在这种情况下完全被迫这样做
收到一封礼貌但有针对性的电子邮件，说未经许可干涉我的电脑是不专业和粗鲁的，此外，批准它的违规决策者应该被狠狠鞭打。

有个视频播放插件，可以根据用户请求和仅用户请求最大化为全屏。做这样的事情需要一个java applet。

Answer 3

正如其他人在之前的回答中所述，更改屏幕分辨率可能是一个坏主意（如果不是根本不可能），但您可以更改内容的比例，使其完全适合您的窗口。

我在下面编写了一段代码，用于我为具有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();
    });
});

如果我的网站布局设置为800x600的分辨率，如果分辨率更高，我可以放大我的网站以适应用户的分辨率吗？

3 个答案: