TIP게시판

제목 모바일웹 개발시 참고...
글쓴이 배강민 작성시각 2010/05/03 09:43:36
댓글 : 2 추천 : 0 스크랩 : 0 조회수 : 26503   RSS
배강민

안녕들하십니까?

CI팁은 아니라서 좀 그렇긴 하지만... 혹, 문제가 된다면 운영진분들께서 옮겨주시기 바랍니다.

CI환경으로 개발하고 있어서리....어쨋든...

일단, 환경은..

ipod, iphone의 safari
기타 스마트폰의 오페라, 오페라미니, 익스플로러에서 테스트하며 개발하고 있습니다.

개발하다가 요런저런게(?) 있어서 혹시 도움이 되실까해서 올려봅니다.

iphone 사파리 에뮬레이터 http://www.testiphone.com/ 100%는 아니지만 흡사해지는듯....
opera mobile 에뮬레이터 http://www.opera.com/developer/tools/ 이건 설치형이라 실제 모바일 환경과 거의 같은듯... agent까지...
opera mini 에뮬레이터 http://www.opera.com/mobile/demo/ 이건 자바로 웹상에서 실시간으로.... 이건 아직 테스트 못해봤습니다. (...글 쓰고서 좀 있다가 자바 깔고 테스트해보니. 조금 느린감이 있지만 잘 되는듯합니당)

그리고 PC용 safari 에서 iphone, ipod 2,3세대의 에이전트 환경에서의 접속을 테스트할 수 있습니다.

http://trend21c.tistory.com/822 요렇게 하면 에이전트별로 확인이 가능합니다. 요 "개발자용" 메뉴가 나오게 하려면

기본설정에 고급탭에 가시면 하단에 체크박스로 개발자용 어찌구가 있습니다. 고거 키시고서 확인하면 여러 에이전트별로 확인할 수 있습니다.

그리고, ipod, iphone 사파리로 들어가면 몇몇 사이트.. m.naver.com 같은데 들어가면 자동으로 상단 주소창이 뿅하고 올라가서 실제 웹페이지가 꽉차게(?) 나옵니다.. 고래 하시려면...

 

		<?php
			//아이폰, 아이팟 사파리면...
			//로딩 완료후 주소창 자동으로 올리기...
			if(strpos(strtolower(AGENT), 'apple') == TRUE && strpos(strtolower(AGENT), 'safari') == TRUE) {
		?>
		<script language = "javascript" type = "text/javascript">
		//<!--
			window.addEventListener('load', function() { setTimeout(scrollTo,0,0,1); }, false);
		//-->
		</script>
		<?php
			}
		?>	
전 위와 같이 했습니다.  다른 에이전트에서는 스크립트 오류가 나서, 에이전트 분기를 해야하는 것 같습니다....

또, ipod, iphone에서 기본적으로 가로로 돌리면 텍스트도 상대적으로 커지게 됩니다...

이를 막기 위해서는 기본 css에... 즉, body부분에  

-webkit-text-size-adjust:none; /* iphone 에서 가로로 돌렸을때 폰트 안커지게... */

위 부분을 추가하면 가로에도 폰트등 동일하게 가로만 늘어나게 됩니다...

근데, jquery 로 몇몇 부분을 처리했었는데, 사파리에서만 정상 동작되고 나머지는 아니되서, 일반 자바스크립트(?)로 변경했습니다...

좀 찾아보니 모바일용 jquery도 보이고 하는것 같긴한데, 아직 잘 모르겠어서 일단...쩝....

$(document).ready(function() {} 으로 간단히 onload를 대체하려했는데 동작을 안하고...
$("#areaLevel1_<?php echo $this->areaLevel1Index; ?>").addClass("areaLevel1Active"); 요런 기본적인 셀렉터도 안먹어서... 쩝...

도움 되실 분들이 한분이라도 계시길 빌며.. 또 허접하지만 팁이 생기면(?) 또 올려보도록 하겠습니다.

쓰다보니 주절주절되어버렸네요... 어이쿠야

힘찬 한주 시작하십시오...

 다음글 간단한 웹접근성 분석도구 (2)
 이전글 Framework - 계속 추가 (1)

댓글

배강민 / 2010/05/03 09:49:11 / 추천 0
아.. 가장 기본이 되는...viewport meta태그에 대해서는 생략하겠습니당...
최용운 / 2010/05/03 15:33:30 / 추천 0
 강민// 고마우이 .. 정말 알찬 정보야!