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

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中,这显然也能正常工作.