顯示警告屏幕分辨率

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

}