|
* html의 head태그에서 처음부터 모바일 접근이진 체크해서 모바일용 프로그램으로 분기시킴 주의점은 리다이렉트를 차단하는 보안 설정에 따라 작동여부가 달라지는데요. 본 테스트에서는 동일 네임서버에서 하위부분만 바꾸므로 일단 차단요소를 최소화함. <script type="text/javascript"> function isMobile(){ var UserAgent = navigator.userAgent; if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null){ return true; }else{ return false; } } if(isMobile()){ location.href = "../../OL_mobile/FGIS/index.html"; //모바일페이지 } </script> |
(2) 모바일용으로 간단하게 js와 css용을 사용합니다. 특히 모바일용으로 나온 jquery 등 여러 플러그인으로 교체합니다.
- 일단 테스트해보니 요즘 사양도 좋고해서 PC데스크탑용 웹프로그램을 최소화하는 것으로 고쳐 사용해 보았다.
* 모바일 화면으로 크기에 맞게 셋팅을 위한 메타 태그 수정 <meta name="viewport" content="width=device-width, height=device-height, initial-scale =1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium- dpi"/> *기본으로 스타일중 바디부분만 하나더 추가해보니 이상없음. z-index와 디스플레이 히든으로 화면 컨테이너을 최대한 덜 건들면서 작은화면을 잘화용하는게 주요한데 어렵네요. 모바일 가로/세로 고정은 불가한거 같습니다. 원래의 앱 개발시는 이러한 사소한 기능도 하는데 ㅠㅠ body { position: fixed; width: 100%; height: 100%; } |
(3) 원본 PC데스크탑용 UI에서 간략하게 부분 수정하여 모발일용 UI로 하나더 만들어 서버의 다른 폴더에 놓고 서비스함
- 안드로이드폰에서 기존 테스크탑용 프로그램으로 접속되었을때....
- 모바일버전으로 분기되었을때(가로모드)
- 모바일버전으로 분기되었을때(세로모드)
|