[jqm] 버그는 아닌 것 같고...? 화면 확대에 관한 문제!

jqm을 이용하여 화면을 핀치 줌인, 줌아웃 할 수 있다

메타 태그에 다음과 같이 코딩하면 된다.

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1.5, user-scalable=yes"> 

그런데 현재 운영 중인 앱에서 이렇게 처리한 페이지 내에 있는 textinput에 포커스만 가면 화면이 자동으로 

확대되는 것이다.

열심히 구글링을 하고 jqm의 API를 뒤져도 딱부러지는 해결책이 보이질 않았다.

그래서 원래 이런 동작을 하도록 구현했나보다 하고 편법으로라도 해결해보고자 하였다.

그리고, 마지막 시도로(사실은 첫 시도가 되었어야 하는데...ㅠ.ㅠ) jqm의 api 사이트로 갔다.

그런데 이 곳에서는 textinput에 포커스가 가도 화면 확대가 발생하지 않는 것이 아닌가?

바로 jqm 사이트의 html 소스와 우리 소스를 비교해보았다.

jqm에는 없는 CSS 속성 하나가 눈에 띄었다.

그 속성을 제거하니...

디자인 효과는 사라졌지만 화면이 확대되지 않는다!!!

관련 CSS에 대해 모두 지웠다가 하나씩 추가하는 방식으로 어떤 구문이 영향을 미치는지 찾았다.

사실 첨부터 의심이 갔던 놈인데 CSS 코드이 제일 마지막에 있어 제일 마지막에 발견했다.

바로

line-height:normal

아무래도 CSS 공부를 좀 해야겠다...ㅠ.ㅠ

결론!!!

textinput에 포커스가 갔을 때 화면이 자동으로 확대된다면 적용된 CSS 중 line-height:normal 속성이 있는지 확인하라!!!