모바일크롬 전체화면으로 만들기 두번째 방법

모바일크롬 전체화면으로 만들기

 

PC용 크롬에서는 F11키를 누르면 바로 전체화면이 가능하지만, 모바일 크롬에서는 F11키가 지원되지 않기 때문에 웹사이트를 볼때 위 아래에 주소창, 상태바 등이 떠서 화면을 좁게 만듭니다

 

 

 

지난번에 포스팅한 것처럼 DIV 로 감싼 부분을 전체화면으로 하는 방식이 있습니다만, 이 방법으로는 해결이 안되는 상황이 발생하기도 합니다. 

 

https://doolyit.tistory.com/152

모바일 화면크기 전체화면으로 변경하기, 주소표시줄 없이 완전 전체화면 jquery/ javascript 이용 /

 

 

 

 

 

 

이번 방법은 바로가기 아이콘을 이용한 방법입니다

사이트에 접속한 후에 우측 상단의 설정메뉴를 눌러 홈 화면에 추가를 클릭하게 되면 

 

 

 

 

 

아래와 같이 바탕화면에 바로가기 아이콘이 생기게 됩니다.  이 아이콘을 클릭해서 접속하게 되면, 

 

 

 

 

아래와 같이 주소창이 없는 넓은 화면을 볼 수 있습니다. 물론, 맨 위의 기기 상태표시라인은 보이게 됩니다

 

 

 

위와 같이 만들기 위해서는 다음 코드를 페이지 상단에 추가해야 합니다

<meta name="mobile-web-app-capable" content="yes">
<link rel="manifest" href="/manifest.json">

 

 

 

그리고 manifest.json 파일을 하나 만들고 아래와 같이 입력합니다.

{
  "short_name": "Donhae Dooly's App",
  "name": "Donhae Dooly",
  "icons": [
    {
      "src": "myicon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}

 

 

이렇게 한 후에 모바일 브라우저에서 접속하고, 설정에서 홈화면에 추가를 하면 됩니다. 

 

이후, 홈화면의 아이콘을 클릭하여 접속하면 전체화면으로 사용할 수 있습니다.

 

 

 

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다'  카페를 소개드립니다. 

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

 

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

 

 

 

 

아래 사이트를 참조했습니다. 

 

출처: https://hjzzin.tistory.com/223 [말랑말랑하게 살아요.]