경고 화면 해상도 표시

Question

최소 800px 너비의 해상도로 볼 수있는 웹 페이지가 있습니다. 내가의 ....

해상도를 사용하여 볼 수 있도록 해상도

이 웹 페이지가 디자인 된

같은 < 800 픽셀 말하는 무언가를 찾아 사용자에게 경고를 추가하고 싶습니다 어떻게 할 수 그렇게? CSS Media-Queries로 할 수 없습니까? 그것에 대해

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 A는, 브라우저의 크기를 조정하려고합니다.

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

}