2019 년 현재 Mobile Safari를 포함하여 <div>가 브라우저 창을 정확하게 채우는 방법

10

단일 페이지 웹 앱을 개발 중이며 대부분 모바일 기기에서 사용됩니다. 그 기능 중 하나는 전체 브라우저 창을 일시적으로 점유하는 맵 모드입니다. 거리 눈금과 일부 컨트롤이지도의 네 모서리에 연결됩니다. 다음은지도에 대한 작은 스크린 샷입니다. 내가 말하고있는 것을 말할 수 있습니다.

지도 오버레이 스크린 샷

지도는 <div>with position: fixed및 4 개의 좌표 0 으로 구현됩니다 . 또한 일시적으로 설정 <body>에 overflow: hidden맵이 원점에서 멀리 스크롤되는 기본 응용 프로그램 화면의 경우를 처리 할 볼 수있다. 데스크톱 브라우저에서 원하는 방식으로지도를 작동시키기에 충분합니다. 모바일 브라우저는 또한 "width=device-width,user-scalable=no"창의 가시 영역이 뷰포트와 정확하게 일치 하도록 메타 뷰포트 태그를 제공해야했습니다 .

이 앱은 원래 몇 년 전에이 앱을 처음 만들었을 때 아름답게 작동 했지만 iOS Safari의 어느 곳에서 확장과 관련된 메타 뷰포트 옵션을 지키지 않았습니다. 너무 많은 사이트가 태그를 잘못 적용하여 읽을 수 없을 정도로 작은 아직 확대 할 수 없습니다. 현재이 브라우저에서지도를 사용하도록 설정하면 약간 확대 된보기가 생겨 오른쪽과 아래쪽의 해당 단추가 잘릴 수 있으며 이에 대해 아무 것도 할 수 없습니다모든 터치는 브라우저 스크롤이 아니라지도에 대한 확대 / 축소 제스처로 해석되기 때문입니다. 해당 버튼을 통해 액세스 할 수있는 기능이없고지도 오른쪽 상단 버튼이 없으면지도를 닫을 수 없습니다. 유일한 해결 방법은 페이지를 새로 고침하여 저장하지 않은 데이터가 손실 될 수 있습니다.

확실히 history.pushState/를 사용 onpopstate하여 맵 오버레이가 별도의 페이지처럼 동작하도록 추가 할 것입니다 . 브라우저의 뒤로 버튼을 사용하여지도 모드에서 벗어날 수 있지만 버튼이 없어서 기능 손실이 해결되지는 않습니다.

.requestFullscreen()지도 오버레이를 구현하는 데 사용 하는 것을 고려 했지만 앱을 사용할 수있는 모든 곳에서는 지원되지 않습니다. 특히 iPhone에서는 전혀 작동하지 않으며 iPad에서는 상태 표시 줄과 콘텐츠를 오버레이하는 거대한 'X'버튼이 나타납니다. 내 거리 눈금을 더 이상 읽을 수 없을 것입니다. 어쨌든 내가 실제로 원하는 것은 아닙니다. 어쨌든 전체 화면이 아닌 전체 창이 필요합니다 .

최신 브라우저에서 전체 창 디스플레이를 사용하려면 어떻게해야합니까? 주제에서 찾을 수있는 모든 정보는 메타 뷰포트 태그 사용에 대해 이야기하지만 더 이상 작동하지 않는다고 언급했습니다.

html  css  mobile-safari  fullscreen 
— 제이슨 하퍼
소스
1
@Joehat, 대부분의 앱 이 반응 형입니다. 그것은 문제가 아닙니다. 터치 맵 제스처는 맵을 확대 / 축소하는 데 사용되며 (d3.js에서 생성 한 SVG 임) 브라우저의 줌 및 스크롤을 조정할 방법이 없습니다. 브라우저가 뷰포트를 제어 할 수있게되면 잘 작동했습니다.
— jasonharper
1
몇 가지 기본 질문 : CSS 재설정을 사용하고 있습니까? 어떤 이상한 여백이나 패딩이 있습니까? 본체가 100vw x 100vh로 설정되어 있습니까? 바디가 맵 div와 상대적으로 위치합니까?
— itsallgoodie
1
이 샘플 코드를 공유해 주시겠습니까?. 확인하고 알려 드리겠습니다
— Ranjith v
1
코드를 보여줘 !!
— nikhil sugandh
1
이 창에 들어가는 내용의 스크린 샷 또는 일부 예는 실제로 진행 상황을 결정하는 데 도움이 될 것입니다.
— 브라이스 하우 트손

답변:

1

body와 html의 높이를 100 %로 설정해야합니다.

   html, body {
       width: 100%;
       height: 100%;
       margin: 0;
    }
— 캡틴
소스
1

이것들을 시도 했습니까?

width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
— 라질 쉬 파 놀리
소스
(나는 당신 vw이 너비가 아니라고 가정합니다 vh...) 당신은 이것을 어떤 요소에 추가 할 것을 제안합니까? 나는 여러 장소 (에서 그것을 시도 <html>, <body>및지도 <div>)하지만, 차이를 보지 못했다.
— jasonharper
div 용입니다. 어떤 요소에도 변형 스케일 또는 확대 / 축소 속성이 적용됩니까?
— Rajilesh Panoli
HTML 레벨에는 변환이 없으며 맵 확대 / 축소 / 패닝은 변환하는 SVG 요소에 변환을 적용하여 수행됩니다.
— jasonharper
0

이 시도:

<meta name="viewport" content="width=device-width, height=device-height , 
initial-scale=1.0,user-scalable=no, shrink-to-fit=yes" />
— 니힐 수간 드
소스
이것은 아무 것도 변경하지 않았으며, 기대할 이유가 없습니다 shrink-to-fit=yes. 기본값은 기본이며 Safari는 더 이상 크기 조정 옵션에주의를 기울이지 않습니다.
— jasonharper
0

이것은 오래된 솔루션이며 밀접하게 연결되어 있지만 정확히 동일하지 않은 문제를 해결하므로 적용 여부는 확실하지 않습니다. https://github.com/gajus/brim

minimal-ui와 비슷한 솔루션이어야합니다.

이 답변을 참조하는 또 다른 질문이 있습니다. iOS 8에서 "minimal-ui"뷰포트 속성을 제거했습니다. 다른 "소프트 풀 스크린"솔루션이 있습니까?

이것이 도움이되는지 알려주십시오.

— 샘 사빈
소스
0

position: fixed몇 년 동안 사용 된 표준 CSS 방법을 사용하는 경우 .

.divFixedClass{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

이렇게하면 div가 자동으로 뷰포트의 전체 크기로 조정되며 위치를 고정하여 사용하면 스크롤하는 양에 관계없이 고정됩니다. 

html.noScroll, html.noScroll > body{
    overflow:none;
}

따라서 noScroll 클래스를 html 태그에 추가하면 스크롤이 비활성화됩니다. 그런 다음 다시 스크롤을 허용하려면 할 수 있습니다.

— 바 케른
소스
0

지도 컨트롤과지도 레이어에 두 개의 레이어 구조를 사용하여이를 구현할 수 있습니다. 실제로 원하는 javascript것을 구현하기 위해 아무것도 필요하지 않음을 의미합니다 (질문에 코딩 예제는 제공되지 않았음에도 불구하고). 당신과 뷰포트 조작 할 수 CSS와 그의 실제 의미입니다 vw및 vh귀하의 코멘트에 대답하기 위해 도움말을 100vw / 100vh을 생각되는 방법? v뷰포트를 의미하므로 도움이 될 수 있습니다 .

예를 들어 스 니펫을 참조하십시오.

질문에 일부 코딩이 존재하면 더 나은 예제 (놓칠 수있는 특정 매개 변수에 대해 더 정확한)가 제공 될 수 있습니다.

추신 : 지도 레이어는 스크롤시 확대되는 이미지로 시뮬레이션됩니다.

function zoom(event) {
  event.preventDefault();

  scale += event.deltaY * -0.01;

  // Restrict scale
  scale = Math.min(Math.max(.125, scale), 4);
  if (scale < 1) {
    scale = 1;
  }
  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}
let scale = 1;
const el = document.getElementById('map');
el.onwheel = zoom;
.container {
  position: absolute;
   display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
}

#map {
  width: 100vw;
  height: 100vh;
    background-repeat: no-repeat;
  background-position: center center;
  background-image: url(https://picsum.photos/800/500.webp);
  z-index: 1;
}


#main {
  display: grid;
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  grid-template-columns: 6rem auto 6rem;
  grid-template-rows: 3rem auto 3rem;
  width: 0;
  height: 0;
 z-index: 2;
}

.t-l {
background: #fc0;
  position: fixed;
  z-index: 2;
  color: #000;
  top; 0;
  left: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 1;
  grid-column-end: column1-end;
  grid-row-start: 1;
  grid-row-end: row1-end;
}
.t-r {
background: #0cf;
  position: fixed;
  z-index: 2;
  color: #000;
  top; 0;
  left: calc(100vw-6rem);
  right: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 3;
  grid-column-end: column3-end;
  grid-row-start: 1;
  grid-row-end: row1-end;
}
.b-l {
background: #c0f;
  position: fixed;
  z-index: 2;
  color: #000;
  bottom: 0;
  top: calc(100vh-3rem);
  left: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 1;
  grid-column-end: column1-end;
  grid-row-start: 3;
  grid-row-end: row3-end;
}
.b-r {
background: #cf0;
  position: fixed;
  z-index: 2;
  color: #000;
  top: calc(100vh-3rem);
  left: 100vw;
  margin-left: -6rem;
  bottom: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 3;
  grid-column-end: column3-end;
  grid-row-start: 3;
  grid-row-end: row3-end;
}
<div class="container">

  <div id="main">
    <button class="t-l">top left control</button>
    <button class="t-r">top right control</button>
    <button class="b-l">bottom left control</button>
    <button class="b-r">bottom right control</button>
  </div>
<div id="map"></div>
</div>
스 니펫 확장

— 피터 다 미스
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.