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

发布于 2024-11-30 07:51:22 字数 194 浏览 5 评论 0原文

我的网站目前的宽度太高，无法以 800x600 或更低的分辨率查看。我想做的是创建某种警告消息，这样当有人的分辨率这么低时，他们就会意识到该网站将无法正确查看。最好，我希望有一个黄色条从顶部下拉，就像 Internet Explorer 那样。

如何使用 HTML 和 CSS 来做到这一点？如果您不能，请告诉我如何用其他语言进行操作。

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

他是夢罘是命 2024-12-07 07:51:22

.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 中，这显然也可以工作。

.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; }
}

Do note however: older versions of IE do not support media queries.

If you want to use jQuery, you can use the following:

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;
}());

This'll obviously work even in older versions of IE.

回复收藏 0 原文

傻比既视感 2024-12-07 07:51:22

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

使用 JavaScript 获取浏览器视口尺寸应该可以帮助您入门。如果视口太小，则输出您想要的 HTML。

回复收藏 0 原文

韶华倾负 2024-12-07 07:51:22

为此，我会使用 Javascript 或 JQuery。

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

I would use Javascript or JQuery rather for this.

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

回复收藏 0 原文

~没有更多了~