출처 : http://cafe.naver.com/websparty


1. 모바일로 접속시 모바일 사이트 이동

 
<script type="text/javascript">
 var mobileKeyWords = new Array('iPhone', 'iPad', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson', 'Opera Mini', 'Microsoft Windows', 'Opera Modi');
 for (var word in mobileKeyWords){ 
 if (navigator.userAgent.match(mobileKeyWords[word]) != null){
 location.href = "http://모바일페이지 경로/";
 break;
 }  
 }
</script>




2. 모바일 접속과 데스크탑 접속에서 배경 이미지 다르게 하기

 <HEAD> </HEAD> 사이에

<script type="text/javascript">

  var veros = navigator.platform;
function mywin()   {

if (veros.indexOf("Mac") > -1 || veros.indexOf("Win") > -1){
 window.document.body.style.cssText = "BACKGROUND-POSITION: left top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(a.jpg); BACKGROUND-REPEAT: no-repeat";

 }else{

 window.document.body.style.cssText = "BACKGROUND-POSITION: left top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(b.jpg); BACKGROUND-REPEAT: no-repeat";
 }
}
</script>

넣고,  </BODY> 뒤에  <script type="text/javascript">mywin()</script> 하시면 됩니다.


 

설정

트랙백

댓글

출처 : [파란 개발자 블로그] http://dev.paran.com/2011/07/06/building-mobile-web-apps-the-right-way-tips-and-techniques/

원제: Building Mobile Web Apps the Right Way: Tips and Techniques

(기사에서는 웹앱 개발이 필요한 이유와 개발 시 고려해야 할 이슈에 대해서 논하고 있지만 익히 들어온 내용이라 해당 내용은 하단의 요약에 정리한 것을 참고 하시기 바랍니다. 결론은 제가 생각하고 있는 웹앱 개발에 필요한 고려이슈 ‘fallback mechanism’에 대해서 얘기하려 합니다.)


Fallback Mechanism 라이브러리 구축

HTML5, CSS3, 그리고 “미디어 쿼리”등 최신 기술을 이용하면 끝내주는 웹앱을 개발할 수 있습니다. 자~ 이제 이 기술을 이용해서 웹앱만 만들면 끝날 것 같습니다. 그럴까요? 아닙니다. 다음 문제가 해결 되야 합니다.

Q: 모든 브라우저에서 똑같이 동작하는가?

아닙니다. 옛날 폰은 물론이고 안드로이드 폰, 아이폰 일지라도 OS 버전에 따라 지원하거나 안될 수 있습니다. 그럼 이 기술을 쓰지 말아야 할까요? 이것도 아닙니다. 그러기에 이 기술들은 너무 매력적이고 환상적입니다.

그래서 fallback mechanism이 필요합니다. 기사에서 툴바를 설명하며 다뤘던 것처럼 개발된 기술이 정상 동작할 수 있는 환경에서는 이를 이용하되 그렇지 못한 환경에서도 유사하게 동작할 수 있게 대안을 제시해야 합니다.

폰에 따라 다른 브라우저, 그리고 OS에 따라 다른 동작(렌더링 등)을 하는 환경에서 개발자 혼자 완벽한 fallback mechanism을 만드는 것은 어려울 것 입니다. 시간이 없어 몇 개의 타겟 단말로 테스트를 할 뿐만 아니라 귀찮다고 생각되 차치하고 넘어갈 가능성이 큽니다.

저희 kth 에서도 사내에서 진행됐던  ‘Eliot’ 행사를 통해 아주 멋진 라이브러리(?)를 만들어 중복 작업 및 개발 시간을 줄 일 수 있는 프로젝트를 진행하고 있다는걸 공유 했는데 이와 유사한 형태로 fallback mechanism 관련해서도 라이브러리를 구축할 필요가 있습니다.

이는 웹앱 개발에 필요한 시간을 단축하고 더욱 Detail에 집중한 완성도 높은 웹앱이 개발될 수 있을 것이라 생각합니다.

 

기사 요약

모바일 웹앱을 개발은 더 이상 선택이 아니고 필수가 되어가고 있습니다. 스마트폰이 없는 사용자가 없을 정도인 지금에 모바일을 플랫폼으로 접근하고 이에 대응되는 다양한 웹앱을 개발할 수 있습니다. 그럼 데스크탑과 다른 환경인 모바일 웹앱을 만들 때 고려가 필요한 점은 다음과 같습니다.

  1. 이미지 개수, 사이즈를 줄여라
    1. 이미지를 사용하기 보다는 CSS3를 이용 (다운로드 이미지 개수 감소)
    2. 이미지의 사이즈를 줄여라 (transparent PNGs의 경우 파이어웍스, 이미지알파를 이용해서 그 사이즈를 줄여라)
  2. 하드웨어 가속
    1. 사파리 5, 파이어폭스 4, 크롬 10, 오페라 11에서 하드웨어 가속 지원. (하드웨어 가속이란 그래픽 작업을 하는 GPU(Graphic Processing Unit)을 브라우저 렌더링 및 transition 작업에 이용해 성능을 향상하는 기능)
    2. 아직 모바일 버전의 브라우저는 지원하지 않음. (역주: 향후 모바일 버전이 지원될 경우 사용자 경험 증대에 지대한 역할을 할 것으로 생각됨)
  3. CSS3 렌더링 성능
    1. CSS3는 환상적인 기능을 제공하지만 특정 기능은 페이지 로딩 성능을 떨어뜨릴 수 있음
    2. 예) shadow in 웹킷 기반 브라우저, opacity in 사파리
  4. Offline storage를 이용한 사용자 경험 증대
    1. 모바일 사용자는 인터넷 연결이 불안. 서비스 제공 시에 많은 데이터 전송은 모바일 환경에 적합하지 않음
    2. 자주 변하지 않는 템플릿성 자원은 모바일 단말에 저장. 향후 서비스 시 cache 형태로 서비스에서 이용. 인터넷 연결 비용을 최소화

설정

트랙백

댓글