显示警告屏幕分辨率

Question

I have a webpage which is designed to view using a minimum resolution of 800px width. I would like to add a warning to the users browsing with a resolution < 800px saying something like

This webpage was designed to be viewed using a resolution of....

How can I do that? Is that not possible to do with CSS Media-Queries?

Answer 1

A different solution, without placing that text as an actual content into the document, is to use a pseudoelement.

eg http://codepen.io/anon/pen/ejlsp

CSS code

@media all and (max-width: 799px) {

    body:before {
      content: "this webpage is best viewed...";
      display: block;
      position: fixed;
      padding: 20px;
      background: #fff;
      border: 2px #ccc solid;
      outline: 400px solid rgba(20,20,20, .7);
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

}

Answer 2

Use CSS media queries for that:

.resolution-warning {
    display: none;
}
@media screen and (max-width: 800px) {
    .resolution-warning {
        display: block;
    }
}

And put in HTML somewhere:

<div class="resolution-warning">You screen resolution is too small.</div>

Here is a demo 1 and 2 , try resizing a browser.