Question

我的网站目前的宽度太高，无法以800x600分辨率或更低分辨率查看。我想要做的是创建某种警告消息，因此当解析度低的人知道该网站将无法正常查看时。最好，我想要一个黄色栏从顶部下拉，就像Internet Explorer一样。

如何使用HTML和CSS执行此操作？如果你不能，请告诉我如何用其他任何语言来做。

由于

Answer 1

.yellowbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 30px;
    background: yellow; /* Use a better color */

    /* and so on... */
}

@media screen and (max-width: 799px), screen and (max-height: 599px) {
    .yellowbar { display: block; }
}

请注意：旧版本的IE不支持媒体查询。

如果要使用jQuery，可以使用以下命令：

var $window = $(window), $bar = $('.yellowbar');

$window.resize(function me () {
    var small = $window.height() < 600 || $window.width() < 800;

    $bar.css('display', small ? 'block' : 'none');

    return me;
}());

即使在旧版本的IE中，这显然也能正常工作。

Answer 2

不检查分辨率，检查视口大小。浏览器窗口可以调整大小。

Get the browser viewport dimensions with JavaScript应该让你入门。如果视口太小，则输出所需的HTML。

Answer 3

我会使用Javascript或JQuery代替。

var width = $(window).width();
var height = $(window).height();
if (width < 800 || height < 600) {
    alert("Your monitor is from the dark ages.");
}

HTML＆amp; CSS - 为分辨率太低的用户创建警告消息？

3 个答案: