모바일 브라우저에서 절대 크기가 다른 크기로 표시되는 이유는 무엇입니까?

Question

저는 현재 데스크톱과 태블릿 브라우저 모두에 간단한 웹 앱을 개발하려고합니다. 모든 것은 데스크톱에서 완벽하게 작동하며 작은 크기 변경을 제외하고는 태블릿에서 작동하므로 요소가 잘못된 위치에 던져집니다.

처음에는 모든 요소 여백, 너비 등이 일관성을 창출한다고 가정하는 픽셀 값으로 정의되었습니다. 그러나 데스크톱 용 크롬에서 339px로 정의 된 요소는 339px 였지만 안드로이드 용 크롬에서는 원격 디버깅이 동일한 CSS로 339px로 정의 된 경우에도 346px로 표시되어 겹침 및 이상한 레이아웃을 초래했습니다.

나는 모바일 브라우저에서 다른 렌더링을 유발하는 뷰포트 메타 태그에 대해 이야기를 들었다. 그러나 추가 한 후 :

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

모바일 브라우저가 데스크톱처럼 작동하도록하려면 브라우저에서 아무런 변화가 없었습니다.

마지막으로 픽셀 값을 em 값으로 변경하여 글꼴 크기가 다르지만 여전히 운이 없다면 조금 더 많은 재생을 허용하려고했습니다. 나는 지금 생각대로 아이디어를 다 써 버렸기 때문에 어떤 조언도 많이 들었을 것이다.

미리 감사드립니다.

Answer 1

많은 모바일 브라우저에이 문제가 있습니다. 이 문제에 대한 잘 알려진 해결책이 있는지 나는 의심 스럽다. 시도해 볼 수있는 것은 max-width 속성을 사용하는 것입니다. 이것을 상한값으로 설정하면 오버플로가 아닌 상위 요소를 포함하는 데 도움이됩니다. 나는 최근 모바일뿐만 아니라 데스크톱 브라우저에서 완벽하게 작동하는 웹 사이트를 통해 온

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

: 반응 설계를위한

, 여기에 도움을 줄 수있는 좋은 자원이다.

http://treadsack.com/

를 사용하여 개발자 도구는 CSS를 확인합니다. 어쩌면 거기에서 몇 가지 조언을 얻을 수 있습니다.