다른 웹 사이트의 비슷한 크기의 텍스트가 내 iPhone에서 다르게 보입니다.

Question

간단한 프로토 타입 응용 프로그램이 http://readinglist.samselikoff.com/입니다.

저는 모바일 전용 사이트를 디자인하고 있습니다 (개인 프로젝트 일뿐입니다). 웬일인지, 나는 나의 iPhone 5 위에서 그것을 끌어 올 때 텍스트가 매우 작게 나타난다.

나는 훨씬 더 큰 것처럼 보이는 유사한 크기의 다른 웹 사이트를 만들었다. 하나의 가능한 설명은 내가 스크립트 태그에 DOM 요소를 래핑하는 Ember.js을 사용하고 있다는 것입니다.

다른 사람이 내 사이트에서이 문제가 발생합니까? 모바일에서 어떻게 보이나요? 예를 들어 <h1> 태그는 48 픽셀입니다. 유사한 글꼴 크기 (장치 너비가 < 인 480px)를 사용하는 다른 사이트는 내 iPhone에서 훨씬 더 크게 보입니다. 엠버일까요, 아니면 제가 빠진 것이 있습니까?

업데이트 : 여기에 몇 가지 화면이 있습니다.

다음은 내 아이폰에서 다음과 같습니다 : 나는에서 검사 할 때 모두 제목의 텍스트는 50 픽셀이 (

첫 번째 두 사람은 480 픽셀의 폭, 내 바탕 화면에 크롬에서 있습니다 Chrome 데스크톱). 내 iPhone에서 "독서 목록"이 너무 작아지는 이유는 무엇입니까?

Answer 1

기본적으로 모바일 브라우저는 더 큰 뷰포트 크기로 렌더링하여 데스크톱 브라우저 인 것처럼 가장합니다. 특정 크기는 플랫폼에 따라 다릅니다. html에 viewport 메타 태그를 추가하여이 동작을 재정의해야합니다.

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

뷰포트를 사용하면 다음과 같이 유용합니다. intro.

Answer 2

올바른 브라우저 구현을 통해 스크립트 태그가 무시됩니다. 그것은 크롬과 기본 안드로이드 브라우저에서 정상적으로 나타났습니다, 나는 그것을 테스트 할 아이폰이 없습니다. 시스템 텍스트 크기가 브라우저와 관련이 있습니까? 시스템 텍스트 크기를 전환하고 브라우저에서 변경되는지 확인할 수 있습니다.