모바일홈페이지 주소창 감추기 tip body[orient="portrait"] ,body[orient="landscape"]

[모바일홈페이지 제작] 모바일 웹 주소창 감추기 tip

모바일홈페이지를 제작할 때 코딩에서 위의 사진처럼 모바일홈페이지 주소창이 사라지게끔 하는 방법에 대한 설명이다.

보통 흔히 아래와 같은 자바스크립트를 많이 쓴다.

window.addEventListener('load',function(){
setTimeout(scrollTo,0,0,1);
},false);

이 스크립트는 모바일홈페이지에서 주소창이 사라지는 기능을 적용하고 있다.

혹은 아예 body 태그에 onload로 넣을 수 있다.

<body onload="setTimeout(function() {window.scrollTo(0, 1)}, 100)">
...
</body>

이 자바스크립트는 window.setTimeout(func, delay, [param1, param2, ...])을 호출하는 형식이다.

1. 0초 후에 scrollTo 메소드를 실행시켜라

2. [param1, param2, ...] 은 scrollTo 메소드의 파라미터 값 (가로 좌표위치값 , 세로 좌표위치값)

!주의: 세로방향의 컨텐츠가 적어서 높이가 디바이스 화면의 높이보다 작으면 주소창이 밀려올라가지 않아서 사라지지 않는다.

이럴경우 <style> 태그에 아래와 같은 portrait, landscape의 미니멈 높이를 픽스시킨다.

http://stackoverflow.com/questions/5855969/hide-address-bar-in-mobile-device-browser

body { min-height:640px; }
body[orient="portrait"] { min-height:640px; }
body[orient="landscape"] { min-height:480px; }

요즘 나오는 모바일 디바이스들의 해상도가 높아졌기 때문에 반드시 뷰포트를 통한 가상해상도를 확인해서 값을 설정해주어야 한다.

반면에 아이폰이 가로로 놓일 경우에는 다음과 같은 스크립트를 사용한다.

         addEventListener("load", function()    {         setTimeout(updateLayout, 0);     }, false);      var currentDeviceWidth = 0;         function updateLayout()     {         if (window.innerWidth != currentDeviceWidth         {             currentDeviceWidth = window.innerWidth;              var orient = currentDeviceWidth == 320 ? "profile" : "landscape";             document.body.setAttribute("orient", orient);             setTimeout(function()             {                 window.scrollTo(0, 1);             }, 100);                     }     }      setInterval(updateLayout, 400);

'Lect & Tip > javascript, jQuery' 카테고리의 다른 글

리액트 Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>. (0)	2021.02.27
Jquery 스와이퍼 슬라이더 플러그인 idangerous.swiper.js pagination 스타일 변경하기 (0)	2021.01.11
'제이쿼리 toggle()이용해서 게시물 목록 정렬 버튼 토글하기 (0)	2020.06.08
✈ jquery로 페이지 상단으로 부드럽게 이동하는 탑 스크롤 버튼 만들기 (0)	2020.02.21
✈ 제이쿼리 체크박스 체크 여부 확인 및 제어 jquery checkbox checked (0)	2020.02.14

모바일홈페이지 주소창 감추기 tip body[orient="portrait"] ,body[orient="landscape"]

'Lect & Tip > javascript, jQuery' 카테고리의 다른 글

댓글

티스토리툴바

모바일홈페이지 주소창 감추기 tip body[orient="portrait"] ,body[orient="landscape"]

'Lect & Tip > javascript, jQuery' 카테고리의 다른 글

관련글

댓글

티스토리툴바