2

My website currently has a width too high to be viewed at 800x600 resolution or lower. What I would like to do is to create some kind of warning message, so when someone with a resolution this low they are made aware that the site will not view properly. Preferably, I would like a yellow bar to drop down from the top much like Internet Explorer does.

How can I do this by using HTML and CSS? If you can't, please tell me how to do it in any other language.

Thanks

Callum
  • 33
  • 1
  • 4
  • 1
    You really don't need to do that. All you need is to set minimal width of page with enabled scrolling. – Māris Kiseļovs Aug 16 '11 at 11:09
  • 2
    I basically agree with @Māris. If I'm using a small viewport, the last thing I need is an annoying yellow bar wasting my precious screen estate, esp. if there's nothing I can do about it. (BTW, the question itself is just fine.) – Álvaro González Aug 16 '11 at 11:13
  • Also, they'll be very used to the situation by now what with 960 grid systems being in vogue for years now –  Aug 16 '11 at 11:14

3 Answers3

5
.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.

Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
  • 3
    Chances are someone with a resolution that low will be using an older version of IE, too (or a smartphone) –  Aug 16 '11 at 11:08
  • 1
    @Scott: Nowadays, it's more likely to be a netbook, tablet, smart phone or even a TV set. – Álvaro González Aug 16 '11 at 11:14
  • Very true. Handily though, many of these new-fangled technologies support CSS3 and, thus, media queries. –  Aug 16 '11 at 11:16
  • +1 Smooth solutions, just make sure to include the script *after* the yellow bar in html, or wrap the code in a document ready event. Also, the .css() calls can be replaced with .show() and .hide() – xec Aug 16 '11 at 11:27
  • @xec: You're absolutely right about using `show/hide`. However, I generally shy away from them, since they alter other CSS properties besides for `display`. – Joseph Silber Aug 16 '11 at 11:30
2

Don't check for a resolution, check for a viewport size. Browser windows can be resized.

Get the browser viewport dimensions with JavaScript should get you started. Output the HTML you want if the viewport is too small.

Community
  • 1
  • 1
user247702
  • 23,641
  • 15
  • 110
  • 157
1

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.");
}
JordanC
  • 4,339
  • 1
  • 22
  • 16