목차
[모바일홈페이지 제작] 모바일 웹 주소창 감추기 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
Hide address bar in mobile device browser
I know 1 way of doing this. ... But this works only if the page is big enough to be scrolled. If the page ...
stackoverflow.com
body { min-height:640px; }
body[orient="portrait"] { min-height:640px; }
body[orient="landscape"] { min-height:480px; }요즘 나오는 모바일 디바이스들의 해상도가 높아졌기 때문에 반드시 뷰포트를 통한 가상해상도를 확인해서 값을 설정해주어야 한다.
반면에 아이폰이 가로로 놓일 경우에는 다음과 같은 스크립트를 사용한다.
안드로이드 홈화면추가시 상단 주소창 제거
<meta name="mobile-web-app-capable" content="yes">ios홈화면추가시 상단 주소창 제거
<meta name="apple-mobile-web-app-capable" content="yes">이번에는 모바일 웹사이트에서 주소창을 숨기는 방법과 주소창 호환성 이슈에 대해 알아보겠습니다. 주소창이 사라지면 페이지의 표시 영역이 늘어나므로 사용자 경험을 향상시킬 수 있습니다. 이 문제는 주로 네이버나 다음과 같은 모바일 플랫폼에서 발생하며, 특히 안드로이드와 아이폰 사이에서 호환성 이슈가 발생할 수 있습니다.
주소창 숨기는 방법: Html 주소창 없애기
모바일 웹사이트에서 모바일 주소창 올리기해서 숨기는 방법은 JavaScript를 사용하여 간단하게 처리할 수 있습니다.
다음은 JavaScript를 활용한 주소창 숨기기의 예시 코드입니다:
window.addEventListener("load", function() {
setTimeout(function() {
window.scrollTo(0, 1);
}, 0);
});위 코드는 페이지가 로드된 후 0ms(즉시) 후에 window.scrollTo(0, 1)을 실행하여 페이지를 스크롤하여 주소창을 숨기는 역할을 합니다. 이 코드를 웹사이트의 <head> 태그 내부에 포함시키면 페이지가 로드되면서 자동으로 주소창이 사라지게 됩니다.
주소창 호환성 이슈와 해결 방법
주소창을 숨기는 방법은 대부분의 모바일 브라우저에서 잘 작동하지만, 안드로이드와 아이폰 사이에서 호환성 이슈가 발생할 수 있습니다. 개발자가 모바일 웹사이트를 개발할 때 이러한 이슈에 대비하여 처리해야 합니다.
안드로이드의 경우, 대부분의 브라우저에서 주소창을 숨기는 JavaScript 코드가 작동하지만, 특정 버전의 안드로이드나 사용자의 설정에 따라 주소창이 숨겨지지 않을 수 있습니다. 이 경우에는 대체 방법을 고려해야 합니다. 예를 들어, 사용자에게 주소창 숨기기 버튼을 제공하거나, 전체 화면 모드를 사용하는 것이 대안이 될 수 있습니다.
아이폰의 경우, Apple은 Safari 브라우저에서 주소창을 숨기는 것을 제한하고 있습니다. 따라서 위에서 소개한 JavaScript 코드는 아이폰에서 작동하지 않을 수 있습니다. 아이폰에서 주소창을숨기기 위해서는 대체 방법을 찾아야 합니다. 아이폰에서는 사용자가 화면을 스크롤하여 주소창을 숨길 수 있으며, 이를 활용하여 사용자가 주소창을 직접 숨길 수 있도록 안내하는 것이 좋습니다.
또한, 크로스 플랫폼 호환성을 위해 아래의 표를 참고하여 각 플랫폼에서의 주소창 숨기기 여부를 확인할 수 있습니다:
| 플랫폼 | 모바일 주소창 자동 숨김 |
| 안드로이드 | 대부분의 브라우저에서 지원 |
| 아이폰 | 주소창 숨기기 제한, 사용자 스크롤로 숨김 가능 |
따라서, 모바일 웹사이트를 개발할 때는 주소창 숨기기 기능의 호환성 이슈를 고려하여 대체 방법을 제공하거나 사용자에게 주소창을 숨기는 방법을 안내하는 등의 대응을 해야 합니다.
이상으로, 모바일 웹사이트에서 주소창을 숨기는 방법과 주소창 호환성 이슈에 대해 알아보았습니다. 주소창 숨기기는 사용자 경험을 향상시키는 데 도움이 되지만, 호환성 문제에 유의하여 대안을 고려해야 합니다. 감사합니다.
'Dev > script' 카테고리의 다른 글
| 자바스크립트로 구현한 rgb 색상표 + CSS 16진수 rgb 색상코드 (0) | 2020.09.07 |
|---|---|
| 자바스크립트 시간 제어 함수 setTimeout(), setInterval(), clearTimeout() (0) | 2020.08.31 |
| 자바스크립트 link Canonical javascript createElement appendChild window.location.href (0) | 2020.08.30 |
| 제이쿼리 아코디언 on() 이벤트 주간 스케줄 만들기 css :not() 선택자 (0) | 2020.08.24 |
| 앵귤러 폴더 권한 문제 angular error windows [nodemon] clean exit, 윈도우 angular js choco install yarn 설치 (0) | 2020.02.11 |
댓글