0

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

4

3 回答 3

3

不，那里没有。这对客户来说是非常烦人的。您必须更改您的网站以适应用户的分辨率。正如评论所建议的那样，使其具有响应性。如果您搜索响应式网页设计，您会发现很多关于如何做到这一点的文章。我们有时在 javascript 中受到限制，因为有些事情会是一个安全问题（这会更令人烦恼）。

试想一下 - 在浏览网页时 - 如果您访问的每个网站都更改了显示器的分辨率！

综上所述，之所以有这么多的网站适合用户分辨率，是因为您无法更改用户的分辨率。

于 2012-12-21T19:25:21.350 回答
0

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

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

浏览器不是电脑。它只是众多应用中的一种。你不知道用户在用他的屏幕做什么——如果他在一个角落播放视频并希望他的浏览器窗口准确地在哪里呢？

如果他有视力障碍并且他的浏览器像疯了一样放大怎么办？我认识一个戴着厚眼镜的人，使用屏幕上的缩放辅助功能框，并且仍然倾斜到离屏幕大约 6 英寸的位置才能看到任何东西。你不会帮他改变浏览器和屏幕布局的任何事情。

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

  1. 立即添加到我的“永远的仇恨列表”中，并且再也不会访问。

  2. 值得告诉我所有的技术朋友，让他们发笑

  3. 提交给 thedailywtf.com 让未来的人们惊叹

  4. 在我的下一篇博客文章中介绍软件不是傲慢的邪恶并且不像它拥有用户的计算机一样，这是我以前从未在博客上写过的主题，但在这种情况下将完全被迫这样做

  5. 收到一封礼貌但尖锐的电子邮件，说这种未经许可擅自干预我的电脑是不专业和粗鲁的，而且批准它的违规决策者应该受到严厉的鞭打。

有视频播放插件可以在用户请求和用户请求时最大化到全屏。做这样的事情需要一个 java 小程序。

于 2012-12-21T19:39:19.787 回答
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 回答