모바일 웹 페이지를 0.5로 확장하는 것이 좋은 습관입니까?

Question

휴대 기기 용 웹 앱 (주로 iPhone 및 Android)을 개발하고 있습니다. 하지만 css px는 device.devicePixelRatio (iPhone4S의 경우 2)에 의존하는 장치 px가 아닙니다. 저희 디자이너는 항상 640 x 960 (iPhone4S 화면)의 화면을 기반으로 디자인을하고 있습니다. 그래서 내 CSS에서 사용하는 크기의 절반은 디자인에 지정된 것입니다. 1 개의 장치 px 경계선의 경우 0.5px의 css는 경계선 없음을 의미합니다. 2 개의 솔루션 (상자 그림자 및 테두리 이미지)이 웹 검색 후 1 개의 망막 픽셀 경계를 이루었지만 구현은보기 흉한 것으로 나타났습니다.

뷰포트에서 초기 눈금을 0.5로 설정 했으므로 이제 내 CSS의 크기는 웹 디자인과 동일하고 1 개의 망막 픽셀 경계선은 구현하기가 자연 스럽습니다.

좋은 방법입니까?

Answer 1

페이지를 사용하려는 장치가 iPhone 4/5 인 경우 거의 완벽합니다.

하지만 회사에서 반응이 좋은 페이지 (여러 해상도로 여러 화면 맞춤)를 찾고 있다면 회사의 출발점은 이러한 디자인이 실제 세계와 일치 할 수 없다는 것을 받아 들여야한다는 것입니다. 그 중 더

기술적 출발점은

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

때로는 다른 설정을 사용하는 이유가있을 수 있습니다 설정하는 것입니다 ...) 다른 해상도에서 만들었지 만, 일반적으로이 출발점이다.

기기의 브라우저의 CSS 픽셀을 기기의 너비로 사용해야하고 초기 확대/축소를 100 % 너비로 설정하고 최소 확대 ('축소')를 100 % 너비로 설정해야한다고합니다.

이유는 수학에 도달하면 매우 간단합니다. iPhone 4/5의 너비는 640px이고 CSS 너비는 320px입니다.
이것은 640 디자인의 50 % 너비입니다 (2 : 1 당 픽셀 당 비율) ...
...하지만 갤럭시 S4는 360px CSS 너비 (33.3 %, 3 : 1)의 1080px 화면을 가지고 있습니다. 비율).

그래서 눈금을 0.5 또는 0.333으로 설정합니까?

어쩌면 데스크톱 사이트가 현재 어떻게 만들어졌으며 특정 최소 너비를 넘어서 내려갈 수 없기 때문에 문제가되는 경우가 있습니다.

그러나 적응력이있는 전형적인 디자인에서는 장치가 얼마나 넓어야하는지 결정하고 디자인을 너비에 맞게 조정할 수 있습니다.

다시 말하면, 이는 종종 미디어 쿼리의 중단 점을 사용하여 개체의 너비에 대한 퍼센트 또는 em/rem을 사용하여 다양한 레이아웃 디자인을 대상으로하는 반응 형 디자인을 의미합니다.

320-480, 480px, 640px 등의 디자인을 디자이너가 만들 수 있습니다.
... 또는 어쩌면 크기가 작아지고 작아 질 수 있습니다. iPad보다 얇다.

귀하와 귀하의 디자이너 및 귀하의 회사 모두에게 달려 있습니다.
그러나 이것은 적어도 프로젝트가 시작되는 방식이며, 그 뒤에있는 아이디어입니다.