如果我的网站布局设置为800x600分辨率,如果分辨率更高,我是否可以放大我的网站以适合用户的分辨率?



我以前措辞错误,我的意图不是更改用户浏览器设置的分辨率。我主要希望将我的页面布局以最小的通用分辨率大小,如果用户的分辨率具有较高的设置,则将其放大以适合分辨率。就像用户的分辨率为800x600一样,我的网站看起来就像我设计的一样,但是如果用户的分辨率为1280x800,我的网站将缩小以符合该分辨率的情况,而不会更改我的网站的布局,这将使字体和尺寸成为大小在整个网站的外观和布局的同时,一切都更大。如果有办法,我该如何?预先感谢:)

没有。这对客户来说非常烦人。您必须更改您的网站才能适合用户分辨率。正如评论所暗示的那样,使其响应迅速。如果您搜索响应式Web设计,您会发现很多有关操作方法的文章。我们有时会受到JavaScript的限制,因为某些事情将是一个安全问题(这会更令人讨厌)。

只是考虑一下 - 在浏览网络时 - 如果您每个网站 访问更改了您的显示器的分辨率!

因此,总而言之,这么多的网站适合用户解决方案是因为您无法更改用户的分辨率。

你不能那样做,也不应该这样做。

您必须尽力使您的网站适应用户当前的浏览器窗口大小。您无法控制浏览器窗口大小或屏幕分辨率,即使您这样做,更改这些内容而不由用户理解和启动的更改也是不礼貌的。

浏览器不是计算机。这只是许多应用程序中的一个应用程序。您不知道用户在用他的屏幕上做什么 - 如果他在一个角落播放视频并希望他的浏览器窗口到底在哪里?

是什么?

如果他在视觉上受损,并且他的浏览器像疯了一样放大了?我知道有人戴着厚眼镜,使用屏幕上的屏幕变焦可访问盒,并且仍然靠在屏幕约6英寸处,能够看到任何东西。您不会对他的忙碌 的布局。

任何一种以某种方式改变了我的浏览器适合屏幕,更改浏览器的分辨率或更改显示器的分辨率的网站:

  1. 立即添加到我的"永远的仇恨清单"中,再也不会访问。

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

  3. 被提交给thedailywtf.com,以供将来的人们惊叹

  4. 是我的下一篇博客文章,介绍了软件不是邪恶的,并且不像拥有用户的计算机那样行动,这是我以前从未写过的主题,但在这种情况下会完全被迫这样做

  5. 收到一封礼貌但指出的电子邮件,即未经许可就与我的计算机进行干预是不专业和粗鲁的,此外,批准批准的有害决策者应该被罚款。

视频播放插件,可以在用户请求和用户请求上最大化全屏。这样做需要Java小程序。

正如其他人在上一个答案中所说的更改屏幕分辨率的人可能是个坏主意(如果不是不可能),但是您可以更改内容的比例,因此它完全适合您的窗口。

我为我为设备设计的Web应用程序编写了一件代码,该应用程序正好是1280x800分辨率。最后,我决定偶尔还会在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();
    });
});

相关内容

最新更新