장치의 실제 크기를 얻는 방법은 무엇입니까?

Question

문제점 : 사용한 장치에 따라 다르게 표시되는 웹 사이트를 코딩하고 싶습니다.

if (screen.width < 400) useLayout(1); 
else if (screen.width >=400 and screen.width < 800) useLayout(2); 
else useLayout(3); 

이제 문제는 내가 모바일 장치에 대한 코드 경우 자바 스크립트에 의해보고 된 화면 너비 내가 메타 태그 뷰포트를 사용하여 설정 한 점이다 : 내가 원하는 것은 같은 것이있다. 그래서 내가 가진 파일 작성하는 경우 : 자바 스크립트 (모두 window.screen.width 및 document.documentElement.clientWidth) 반환 된 값이 정확히이 값은 REAL 표시 크기를 반영하지 않습니다 410 인을 사용하는 경우 ...

을 다음

<meta id='viewport' name='viewport' content='width=410'> 

무엇 그 장치에서 얼마나 많은 인치 (또는 cm)가 100 픽셀인지 이해하는 것이 정말 필요합니다 ...

어떤 방법이 있습니까? 감사합니다.

Answer 1

나는 이것이 태그 된 JavaScript임을 알고 있지만 적절한 해결책이 아닌 것으로 생각합니다. CSS에는이 기능이 내장되어 있습니다. 가능한 한 많이 디자인 레이어를 스크립트 밖으로 유지하는 것이 좋습니다. CSS 반응 형 디자인/Media Queries을 살펴보십시오.

예 :

@media screen and (max-width:399px) { 
    body { 
     background-color : 'red'; 
    } 
} 
@media screen and (min-width:400px) and (max-width:799px) { 
    body { 
     background-color : 'blue'; 
    } 
} 
@media screen and (min-width:800px) { 
    body { 
     background-color : 'green'; 
    } 
} 

또한 적용되지 않는 사용자를위한 중복 CSS 데이터 전송을 최소화하기 위해 자신의 CSS 파일에 사람들을 분리 할 수 ​​:

<link rel="stylesheet" media="screen and (max-width:399px)" href="layout1.css" /> 
<link rel="stylesheet" media="screen and (min-width:400px) and (max-width:799px)" href="layout2.css" /> 
<link rel="stylesheet" media="screen and (min-width:800px)" href="layout3.css" /> 

가의 부정확성에 대한 귀하의 질문에 대답하기를 JS의 화면은 not so cut and dry이고 interpretation variances을위한 공간이 필요합니다.