스마트 폰 브라우저의 해상도

Question

안드로이드 폰이 반응 형 웹 페이지의 해상도를 어떻게 계산하는지 궁금합니다. 예를 들어 iPhone 5의 기본 해상도는 640x1136이지만 웹 페이지에 사용되는 해상도는 320x568입니다. (따라서 필요할 때 디자인의 요소를 측정 할 수 있습니다. 일반적으로 백분율을 사용하지만 픽셀 단위로 요소를 측정해야하는 경우도 있습니다.)

따라서 안드로이드 전화가 반응이있는 디자인의 웹 사이트를 방문하고 기본 해상도를 가지고있을 때 1920x1080의 크기로 렌더링되는 웹 페이지의 요소는 무엇입니까? 그것도 1/2입니까? 아니면 기기마다 다른가요?

내가 한 테스트에서 무슨 일이 일어나고 있는지 명확하게 알 수는 없습니다.

감사합니다.

Answer 1

내 경험에 따르면, 모든 것을 올바르게 구성하고 장치 너비에만 집중하면 대부분의 경우 원하는 결과를 얻을 수 있습니다.

기기 너비는 스마트 폰 또는 태블릿의 픽셀을 측정 한 것으로, 일반적으로 망막 장치의 경우 해상도는 두 배입니다.

구조화 제대로 의미

(1) 문서의 머리는 당신이 확대 방지 할 수 귀하의 메타 태그 선택적으로

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

을 포함에서

<meta name="viewport" content="width=device-width, user-scalable=no" /> 

(2) 귀하의 CSS에서 미디어 검색은

과 같습니다.

@media (max-width: 480px) { 
    ... 
} 

@media (max-width: 767px) { 
    .... 
} 

@media (min-width: 768px) and (max-width: 979px) { 
    ... 
} 

@media (min-width: 1200px) { 
    ... 
} 

당신이 선택한 브레이크 포인트는 픽셀 너비에 기반한 화면 표시를 조작하고 픽셀 비율, 해상도, 방향 및 기타 관련 세부 정보로 인생을 복잡하게 만들지는 않는 중요한 요소입니다.

예외가 발생하지만 간단하게 시작한 다음 원하는 결과를 얻으면 장치를 대상으로 미끄러지는 경사를 피할 수 있으며 이는 미래의 설계에 도움이됩니다.

행운을 빈다.