javascript에서 브라우저(userAgent)를 구분하는 방식을 이용하여 아래와 같이 작성하여 모바일이라면 특정 폴더 및 파일로 연결할 수 있다.
/**
* 모바일 페이지 강제 이동
*/
//Mobile여부를 구분하기 위함
var uAgent = navigator.userAgent.toLowerCase();
// 아래는 모바일 장치들의 모바일 페이지 접속을위한 스크립트
var mobilePhones = new Array('iphone', 'ipod', 'ipad', 'android', 'blackberry', 'windows ce','nokia', 'webos', 'opera mini', 'sonyericsson', 'opera mobi', 'iemobile');
for (var i = 0; i < mobilePhones.length; i++){
if (uAgent.indexOf(mobilePhones[i]) != -1){
location.href="/mobile/home/main.do";
}
};
일단 중요한 것은 HTML, BODY가 화면의 높이를 모두 사용하고 있어야 한다는 것이다.
HTML에서 WRAPPER의 높이를 아무리 100%를 주어도 WRAPPER의 부모인 HTML, BODY의 높이가 없으면 화면 높이를 모두 사용하지 못하게 된다. 이때 위와 같이 html, body에 height를 100%를 주면 클래스명 wrapper에서 height를 100%로 하면 높이를 브라우저 화면 높이를 모두 사용한다. 만약 html, body에 높이를 주지 않고 하고 싶다면 아래와 같이 wrapper에서 height를 화면(viewport)의 단위인 100vh를 사용하면 된다.
