아이폰 모바일웹에서 Content영역 잘보이게 하기

okjsp사이트를 아이폰으로 볼 때마다 한 가지 아쉬운 점이 있었습니다. 제목이나 다른 링크들은 잘 보이는데, 항상 콘텐츠 영역이 너무 작게 표현되는 것입니다.

확대를 해도 마찬가지였습니다.

그나마 아이팟터치4에서는 조금 더 나았지만, 그래도 아쉬움이 많이 남았습니다

구글신에게 따졌더니 방법을 알려주더군요. 아래처럼 나아졌습니다

-webkit-text-size-adjust 라는 CSS 속성을 통해서 변경했습니다.

-webkit-text-size-adjust: 160%;

내용 부분에 위와같은 CSS 속성을 주어서 아이폰에서 봐도 무리없게 되었습니다.

추론:

Safari 브라우저의 "읽기 도구" 기능이 비활성화 된 것으로 봐서는 브라우저 콘텐츠 파싱 기술이 적용이 되어서 아이폰에서 다르게 보이지 않았나 생각됩니다.

소회:

브라우저에서는 멀쩡하게 보이는 것이라 원인을 찾는 것과 작업하는 것이 수월하지 않았습니다. 아이폰 시뮬레이터를 사용할 수 없었던 상황이라서 더 그랬죠. 

참고:

http://css-infos.net/property/-webkit-text-size-adjust : CSS Property : -webkit-text-size-adjust

http://ajju.textcube.com/16 iphone safari 회전시 폰트 사이즈 변경 버그