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 속성이 있는지 확인하라!!!


저작자 표시
신고

일단 기본적인 세팅으로는 화면 회전을 할 경우 onSaveInstanceState, onCreate 등이 모두 다시 호출이 된다.

이러한 동작을 막고 onConfigurationChanged를 호출하여 끝내고 싶을 경우 해당 Activity에 

onConfigurationChanged (Configuration newConfig)를 오버라이드하여 구현하고 AndroidManifest.xml의 

Activity 설정에 다음 내용을 추가해주어야 한다.


android:configChanges="orientation|keyboardHidden|screenSize"


단, 이 때 안드로이드 펌웨어 구버전에서는 screenSize가 없어도 가능했던 모양인데

최근 버전에서는 screenSize도 같이 적어줘야 이 내용이 반영이 되므로 주의해야 한다.

자세한 내용은 API 참고...^^;;;



저작자 표시
신고

현재 jQuery mobile과 PhoneGap을 이용하여 하이브리드 앱을 개발해보고자 열공 중이다.

시작 단계여서이긴 하겠지만 출발부터 난항이다.


index.html에 버튼을 만들어 a.html 페이지를 호출하게 하고 a.html 페이지가 로드될 때 자바 스크립트가

수행되도록 했는데...


이게 아무리 해도 a.html 페이지에 있는 스크립트가 실행되지 않는 것이다.

한참을 고민하다가 jQuery mobile의 링크 방식이 기본적으로 Ajax 방식이라고 했던 것이 기억났다.

즉, 페이지의 내용만 살포지 가져와 보여주는 것이다...-.-


결국 a 태그에 rel="external" 속성을 주었더니 제대로 자바 스크립트를 호출하였다.

data-ajax="false"를 주어도 마찬가지라고 한다.


역시 초반 공부에는 구글링이고 나발이고 공부하고 있는 책을 참조하는 것이 장땡이다.


저작자 표시
신고

+ Recent posts

티스토리 툴바