如何使<div>完全填充浏览器窗口，包括截至2019年的Mobile Safari

10

我正在开发一个单页Web应用程序，该应用程序通常会在移动设备上使用。它的功能之一是地图模式，它会临时接管整个浏览器窗口。距离比例尺和一些控件连接到地图的四个角。这是地图的一些屏幕截图，因此您可以知道我在说什么：

该图是作为一个<div>与position: fixed所有四个坐标为零; 我还将在地图可见时临时将设置为<body>，overflow: hidden以处理基础应用程序显示远离原点滚动的情况。这足以使地图完全按照我在桌面浏览器上的方式工作。移动浏览器还要求我给meta视口标签加上类似的东西"width=device-width,user-scalable=no"，以使窗口的可见区域与视口完全对应。

几年前，当我最初编写此应用程序时，所有这些方法的运行都很漂亮，但是iOS Safari沿途停止了任何涉及缩放的元视口选项-显然有太多站点在错误地使用了标签，导致文本小得难以理解，但不可缩放。当前，如果在此浏览器上启用地图，则可能会获得稍微放大的视图，该视图会切断右侧和底部的那些按钮-您对此无能为力，因为所有触摸都被解释为地图的缩放/平移手势，而不是浏览器滚动。没有通过这些按钮访问的功能，地图就不是非常有用-没有右上角的按钮，您甚至无法关闭地图。唯一的方法是重新加载页面，这可能会导致未保存的数据丢失。

我肯定会添加history.pushState/ 的使用，onpopstate以便地图覆盖的行为就像单独的页面一样。您可以使用浏览器的“后退”按钮退出地图模式-但这不能解决由于缺少按钮而导致的其他功能损失。

我已经考虑过使用.requestFullscreen()来实现地图叠加层，但是并非所有地方都支持该应用程序可用。特别是，它显然根本无法在iPhone上使用，在iPad上，您会看到一个状态栏和一个巨大的“ X”按钮，该按钮覆盖您的内容-我的距离刻度可能不再可读。无论如何，这并不是我真正想要的语义-我需要整个窗口，而不是整个屏幕。

如何在现代浏览器上显示全窗口显示？我可以在该主题上找到的所有信息都涉及使用meta视口标记，但是正如我提到的那样，它不再起作用。

— 杰森·哈珀
source

1

@Joehat，大部分应用程序都具有响应能力；那不是问题。只是此地图覆盖功能存在问题：触摸手势用于缩放/平移地图（这是dg.js生成的SVG），而无法调整浏览器的缩放和滚动。当浏览器允许我控制视口时，它工作得很好。

— jasonharper

1

一些基本问题：您是否正在使用CSS重置？有什么奇怪的边距或填充物吗？车身设置为100vw x 100vh吗？身体相对于您的地图div是否定位？

— itsallgoodie

1

能否请您分享示例代码。.我将检查并告知您

— Ranjith v

1

显示你的代码！

— 尼克希尔·苏甘德，

1

屏幕截图或该窗口中内容的某些示例将真正帮助确定发生了什么。

— 布莱斯·霍伊森

1

解

window.innerHeight使用JavaScript 将全屏div的高度设置为，然后在调整窗口大小时对其进行更新。

同样的问题在这里：

https://stackoverflow.com/a/37113430/8662476

更多信息：

— 毛里奇·阿巴德（Maurici Abad）
source

1

您需要将body和html的高度都设置为100％

   html, body {
       width: 100%;
       height: 100%;
       margin: 0;
    }

— 机长
source

1

你尝试过这些吗？

width: 100vw;
height: 100vh;
margin: 0;
padding: 0;

— 拉吉列什·帕诺利（Rajilesh Panoli）
source

（我假设您的意思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" />

— 尼基·苏甘
source

这并没有改变任何东西，我没有理由期望它shrink-to-fit=yes是默认值，并且Safari不再关注缩放选项。

— jasonharper

0

由于我无法发表评论，因此我想补充一点，您应该检查您的正文标签是否为浏览器的高度。您可能还需要检查以下内容：Chrome / Safari无法填充Flex父级的100％高度

— 三角
source

0

这是一个旧的解决方案，解决了一个紧密联系但又不完全相同的问题，因此我不确定它是否适用：https： //github.com/gajus/brim

应该认为它是与minimal-ui类似的解决方案。

这是另一个引用此答案的问题： iOS 8删除了“最小用户界面”视口属性，是否还有其他“软全屏”解决方案？

让我知道这是否有帮助。

— 山姆·萨宾
source

0

尝试下面的div代码

.class{height:100vh;}

— 阿塔·乌尔·雷曼（Ata Ur Rehman）
source

0

如果您使用的position: fixed只是使用已经存在多年的标准CSS方法。

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

这将使div自动调整为视口的完整大小，并使用possition固定将其锁定在适当的位置，无论它们滚动多少，如果需要，可以禁用主体滚动

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

因此，如果您仅将noScroll类添加到html标签，它将禁用滚动。然后，当您想允许再次滚动时，可以。

— 巴克01
source

0

您可以使用地图控件和地图图层的两层结构来实现此目的。这意味着您实际上不需要任何东西javascript来实现您想要的东西（尽管问题中未提供任何编码示例）。你可以操纵视口CSS，这是实际意义vw，并vh为了回答您的评论100vw / 100vh应该是怎样的帮助？，因为v代表视口。

参见示例。

如果问题中存在某些编码，则可以提供一个更好的示例（在可能遗漏的特定参数上更准确）。

PS：地图图层是通过滚动放大的图像模拟的。

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>

展开摘要

— 彼得·达米斯
source