'모바일웹'에 해당되는 글 1건

  1. 2012.06.15 모바일웹 접근 시 주소창을 사라지게 하는 것
2012. 6. 15. 11:15

아티클 참고하지마세요.

요새 나오는 모바일 브라우저 동작하지 않으며 브라우저 자체적으로 주소창이 올라가는 경우도 있습니다.

그래서 주소창 올리는 걸 자동으로 하지 않는 추세입니다.

 - 2014.01.27

 

대형포털 및 여러 사이트들을 가보면 처음 접속 시 주소창이 위로 올라가는 것을 볼 수 있다.

 

setTimeout(scrollTo,0,0,1);

대부분 이 것을 사용한 것인데 이에 대해서 잘못사용되어지고 있는 경우와 올바른 사용법에 대해 보고자한다.

 

일단 개인적으로 달랑 위의 스크립트 한줄 적어주는건 맞지 않다고 생각한다.

크게 IE와 FF로 나눠서 이벤트를 걸 수 있는데 window.attachEvent 와 window.addEventListener 이다.

 

if(IE일 때)

     window.attachEvent

if(FF일 때)

     window.addEventListener

 

// 화면이 로드되었을 경우 실행

window.addEventListener("load", function(){
    setTimeout(scrollTo,0,0,1);
}, false);
// 화면이 전환(가로/세로)되었을 때 실행
window.addEventListener("orientationchange", function(){
    setTimeout(scrollTo,0,0,1);
}, false);

기본적으로 addEventListener 이부분이 attachEvent로 변경되던지 아니던지 해서 동작한다.

 

이런식으로 해야된다긴하지만 개인적으론 브라우저별로 맞추는게 문제가 아니라 해당 기종에 대해 맞춰주는게 더 좋다고 본다.

userAgent 에서 iPhone과 안드로이드 기종인 경우 Linux를 체크해서 해당 기기일 때만 주소창을 감추도록 하는게

어떻게 보면 더 깔끔하지 않나 싶다.

블랙베리, 윈모, 기타 등등은 userAgent를 확인하지 못했다.

 

// 아이폰이거나 안드로이드폰(Linux)일 때 로드 시, 화면 전환 시 주소창 감추기
$(document).ready(function(){
    if(navigator.userAgent.indexOf("iPhone") != -1 || navigator.userAgent.indexOf("Linux") != -1){
         addEventListener("load", function(){
              setTimeout(scrollTo, 0, 0, 1)
         }, false);
         addEventListener("orientationchange", function(){
              setTimeout(scrollTo, 0, 0, 1)
         }, false);
    }
});

Posted by silver0r