显示警告屏幕分辨率

Question

我有一个网页，其目的是使用800px宽度的最小分辨率进行查看。 我想警告添加到用户的分辨率浏览< 800像素又说什么

本网页的目的是要使用的....

分辨率观看我怎样才能去做？这是不可能的与CSS媒体查询？

Answer 1

对于使用CSS media queries：

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

，放在HTML的地方：

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

这里是一个demo 1和2，尝试调整浏览器。

Answer 2

一个不同的解决方案，不将该文本作为实际内容放置到文档中，而是使用伪元素。

例如http://codepen.io/anon/pen/ejlsp

CSS代码

@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%); 
    } 

}