Cách tạo <div> chính xác lấp đầy cửa sổ trình duyệt, bao gồm cả Mobile Safari kể từ năm 2019

10

Tôi đang làm việc trên một ứng dụng web một trang, thường được sử dụng trên các thiết bị di động. Một trong những tính năng của nó là chế độ bản đồ, tạm thời chiếm toàn bộ cửa sổ trình duyệt; một tỷ lệ khoảng cách và một số điều khiển được gắn vào bốn góc của bản đồ. Dưới đây là một ảnh chụp màn hình nhỏ của bản đồ để bạn có thể biết tôi đang nói về điều gì:

Ảnh chụp màn hình của lớp phủ bản đồ

Bản đồ được thực hiện như một <div>với position: fixedvà tất cả bốn tọa độ bằng không; Tôi cũng tạm thời thiết lập <body>để overflow: hiddenkhi bản đồ là có thể nhìn thấy để xử lý các trường hợp màn hình hiển thị ứng dụng cơ bản được cuộn ra khỏi xứ. Điều đó đủ để làm cho bản đồ hoạt động chính xác như tôi muốn trên các trình duyệt máy tính để bàn. Các trình duyệt di động cũng yêu cầu tôi cung cấp thẻ meta viewport với nội dung giống như "width=device-width,user-scalable=no"để làm cho khu vực hiển thị của cửa sổ tương ứng chính xác với chế độ xem.

Điều này tất cả làm việc đẹp một vài năm trở lại khi tôi ban đầu đã viết ứng dụng này, nhưng ở đâu đó dọc theo dòng iOS Safari ngừng tôn vinh bất kỳ tùy chọn meta viewport liên quan đến mở rộng quy mô - rõ ràng là quá nhiều trang web được Áp dụng sai thẻ, dẫn đến văn bản đó là không đọc được nhỏ, chưa thể nhìn thấy Hiện tại, nếu bạn bật bản đồ trên trình duyệt này, bạn có thể có chế độ xem phóng to một chút, sẽ cắt các nút đó ở bên phải và bên dưới - và bạn không thể làm gì về nó, bởi vì tất cả các lần chạm được hiểu là cử chỉ thu phóng / xoay cho bản đồ, thay vì cuộn trình duyệt. Bản đồ không hữu ích lắm nếu không có các tính năng được truy cập thông qua các nút đó - và không có nút trên cùng bên phải, bạn thậm chí không thể đóng bản đồ. Cách duy nhất là tải lại trang, điều này có thể dẫn đến mất dữ liệu chưa được lưu.

Tôi chắc chắn sẽ thêm việc sử dụng history.pushState/ onpopstateđể lớp phủ bản đồ hoạt động như một trang riêng. Bạn có thể thoát khỏi chế độ bản đồ bằng nút Quay lại của trình duyệt - nhưng điều đó không giải quyết được phần còn lại của việc mất chức năng do thiếu các nút.

Tôi đã cân nhắc sử dụng .requestFullscreen()để triển khai lớp phủ bản đồ, nhưng nó không được hỗ trợ ở mọi nơi mà ứng dụng có thể sử dụng được. Đặc biệt, nó dường như hoàn toàn không hoạt động trên iPhone và trên iPad bạn có một thanh trạng thái và nút 'X' khổng lồ che phủ nội dung của bạn - thang đo khoảng cách của tôi có thể sẽ không thể đọc được nữa. Dù sao, đó không phải là thứ tôi thực sự muốn - tôi cần toàn bộ cửa sổ chứ không phải toàn màn hình.

Làm cách nào để có màn hình toàn cửa sổ hoạt động trên các trình duyệt hiện đại? Tất cả thông tin tôi có thể tìm thấy về chủ đề nói về việc sử dụng thẻ meta viewport, nhưng như tôi đã đề cập rằng nó không còn hoạt động nữa.

html  css  mobile-safari  fullscreen 
— jadanharper
nguồn
1
@Joehat, phần lớn các ứng dụng là đáp ứng; Đó không phải là vấn đề. Đây chỉ là một tính năng lớp phủ bản đồ có vấn đề: cử chỉ chạm được sử dụng để phóng to / xoay bản đồ (đó là một SVG, được tạo bởi d3.js), không có cách nào để điều chỉnh thu phóng và cuộn của trình duyệt. Nó hoạt động tốt trở lại khi trình duyệt cho phép tôi kiểm soát chế độ xem.
— jasonharper
1
Một số câu hỏi cơ bản: Bạn đang sử dụng thiết lập lại CSS? Có bất kỳ lợi nhuận kỳ lạ hoặc paddings trên bất cứ điều gì? Cơ thể có được đặt thành 100vw x 100vh không? Là cơ thể vị trí tương đối cho div bản đồ của bạn để làm việc với?
— itallgoodie
1
bạn có thể vui lòng chia sẻ mã mẫu cho việc này không .. tôi sẽ kiểm tra và cho bạn biết
— Ranjith v
1
hiển thị mã của bạn !!
— nikhil sugandh
1
Một ảnh chụp màn hình hoặc một số ví dụ về nội dung được đưa vào cửa sổ này sẽ thực sự giúp xác định những gì đang diễn ra.
— Bryce Howitson

Câu trả lời:

1

Bạn cần đặt chiều cao của cả thân và html thành 100%

   html, body {
       width: 100%;
       height: 100%;
       margin: 0;
    }
— iicaptain
nguồn
1

Bạn đã thử những thứ này?

width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
— Rajilesh Panoli
nguồn
(Tôi giả sử bạn có ý nghĩa vwvề chiều rộng, không phải vh...) Bạn đang gợi ý yếu tố nào mà tôi thêm nó vào? Tôi đã thử nó ở một số nơi ( <html>, <body>và bản đồ <div>), nhưng thấy không có sự khác biệt.
— jasonharper
Nó là dành cho div. Có bất kỳ quy mô biến đổi hoặc thu phóng thuộc tính nào được áp dụng cho bất kỳ yếu tố nào không?
— Rajilesh Panoli
Không có biến đổi ở cấp độ HTML, thu phóng / quét bản đồ của tôi được thực hiện bằng cách áp dụng các bản dịch cho các thành phần SVG sáng tác nó.
— jasonharper
0

thử cái này:

<meta name="viewport" content="width=device-width, height=device-height , 
initial-scale=1.0,user-scalable=no, shrink-to-fit=yes" />
— nikhil sugandh
nguồn
Điều này không thay đổi bất cứ điều gì và tôi thấy không có lý do gì để mong đợi nó: shrink-to-fit=yeslà mặc định và Safari không còn chú ý đến các tùy chọn mở rộng.
— jasonharper
0

Đây là một giải pháp cũ và giải quyết một vấn đề được liên kết chặt chẽ, nhưng không hoàn toàn giống nhau, vì vậy tôi không chắc liệu nó có áp dụng hay không: https://github.com/gajus/brim

Nó được cho là một giải pháp tương tự như tối thiểu.

Đây là một câu hỏi khác tham khảo câu trả lời này: iOS 8 đã loại bỏ thuộc tính chế độ xem "Minimal-ui", có giải pháp "toàn màn hình mềm" nào khác không?

Hãy cho tôi biết nếu điều này giúp tất cả.

— Sam Sabin
nguồn
0

nếu bạn sử dụng position: fixedchỉ cần sử dụng phương pháp CSS tiêu chuẩn đã có từ nhiều năm.

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

Điều này sẽ chỉ làm cho kích thước tự động div thành kích thước đầy đủ của chế độ xem và sử dụng quyền sở hữu được cố định tại chỗ cho dù chúng có cuộn bao nhiêu, bạn có thể vô hiệu hóa cuộn cơ thể nếu bạn cần 

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

Vì vậy, nếu bạn chỉ cần thêm lớp noScroll vào thẻ html, nó sẽ vô hiệu hóa cuộn. sau đó khi bạn muốn cho phép cuộn lại, bạn có thể.

— Barkermn01
nguồn
0

Bạn có thể thực hiện điều này bằng cách sử dụng cấu trúc hai lớp cho các điều khiển bản đồ và lớp bản đồ của bạn. Có nghĩa là bạn thực sự không cần bất kỳ javascriptđiều gì để thực hiện những gì bạn muốn (mặc dù không có ví dụ mã hóa nào được đưa ra trong câu hỏi). Bạn có thể thao tác chế độ xem với CSSvà đó là ý nghĩa thực tế của vwvà vhđể trả lời bình luận của bạn Làm thế nào 100vw / 100vh được cho là giúp đỡ? , nó có thể giúp vì vviết tắt của khung nhìn.

Xem đoạn trích chẳng hạn.

Một ví dụ tốt hơn (chính xác hơn về các tham số cụ thể có thể bị bỏ qua) có thể được cung cấp nếu một số mã hóa có trong câu hỏi.

PS: lớp bản đồ được mô phỏng bằng hình ảnh được phóng to khi cuộn.

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>
Mở rộng đoạn trích

— Peter Darmis
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.