logo标签列表

如何使一个 <div> 充满整个浏览器窗口，包括2019年的移动Safari？

htmlcssmobile-safarifullscreen
13
我在开发一个单页面Web应用程序，主要面向移动设备用户。其中之一的功能是地图模式，该模式暂时接管整个浏览器窗口；距离刻度和一些控件附加在地图的四个角上。以下是地图的截图，以便您了解我所说的内容：地图叠加屏幕截图 地图实现为位置固定（position: fixed）的
元素，四个坐标值都为零；同时，当地图可见时，我会将元素临时设置为overflow：hidden，以处理底层应用程序显示被滚动远离原点的情况。这足以使地图在桌面浏览器上完全按照我想要的方式工作。对于移动浏览器，还需要提供META视口标签，例如使用类似“width=device-width，user-scalable=no”的内容，以便使窗口的可见区域正好对应于视口。

几年前我编写这个应用程序时，所有的都非常完美。但是在某个时间点，iOS Safari停止了使用任何涉及缩放的 meta viewport 选项，因为似乎有太多的网站错误地使用了该标记，导致文本太小而无法阅读，但又无法缩放。如果在此浏览器上启用地图，则可能会得到略微放大的视图，从而截断右边和底部的按钮，而您无法对此做任何事情，因为所有触摸都被解释为地图的缩放/平移手势，而不是浏览器滚动。没有通过那些按钮访问的功能，地图并不是特别有用 - 而且没有右上角的按钮，您甚至无法关闭地图。唯一的出路是重新加载页面，这可能会导致未保存的数据丢失。

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

我曾考虑使用 .requestFullscreen() 实现地图叠加层，但它在应用程序可用的所有地方都不被支持。 特别是，在iPhone上根本不起作用，在iPad上，您会得到一个状态栏和一个巨大的“X”按钮覆盖您的内容 - 我的距离比例尺可能不再可读。 这实际上并不是我想要的语义 - 我需要整个window，而不是全屏幕。

如何在现代浏览器上实现全窗口显示？ 我能找到的所有关于此问题的信息都是关于使用meta viewport标签，但正如我所提到的，它现在已经不再起作用。

1
@Joehat，应用程序的大部分已经响应了；这不是问题。只是这个地图叠加功能有问题：触摸手势用于缩放/平移地图（它是由d3.js生成的SVG），没有办法调整浏览器的缩放和滚动。当浏览器允许我控制视口时，它运行得非常好。 - jasonharper
1
一些基本问题：您是否使用CSS重置？任何东西上有奇怪的边距或内边距吗？body设置为100vw x 100vh了吗？为使map div正常工作，body是否定位为相对位置？ - itsallgoodie
1
你能分享一下这个的样例代码吗？我会检查并告诉你。 - Ranjith v
1
展示你的代码！ - Nikhil S
1
一个屏幕截图或一些放入此窗口的内容示例将有助于确定发生了什么。 - Bryce Howitson
显示剩余10条评论
9个回答
3
如果您使用的是 position: fixed，只需使用已经存在多年的标准CSS方法即可。
.divFixedClass{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

这只是让div自动调整为整个视窗的大小，并使用fixed定位将其锁定在原地，无论滚动多少次。如果需要，你可以通过禁用body滚动来实现。
html.noScroll, html.noScroll > body{
    overflow:none;
}

如果你将noScroll类添加到html标签中，它将禁用滚动。然后当你想再次允许滚动时，可以取消该类。

1
1

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

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

你试过这些吗？

width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
你建议我将这个添加到哪个元素中？我尝试了几个地方（<html>，<body>和地图<div>），但没有看到任何区别。请注意，我假设您在宽度上使用的是vw，而不是vh。 - jasonharper
这是针对 div 元素的。是否应用了任何元素的 transform scale 或 zoom 属性？ - Rajilesh Panoli
在 HTML 层面上没有转换，我的地图缩放/平移是通过对构成它的 SVG 元素应用翻译来完成的。 - jasonharper
0
0
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>

0
尝试以下代码来创建 div 元素：
.class{height:100vh;}
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
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接