iPhone上的Chrome浏览器会在空白页上溢出内容（仅在新标签上，不会重新加载）

debugcn 发表于 Dev

西里尔·盖拉德（Cyril Gaillard）

在IOS Chrome上，正文会在没有内容的新标签页或页面上溢出，但是如果重新加载页面，则此问题已解决。对于位于底部的任何元素（绝对或固定）都会造成问题。这是重现该问题的代码：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=2, initial-scale=1">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <style>* {
         box-sizing: border-box;
         }
         html{
          height:100%;
         }
         body {
          height:100%;
          background-color:yellow;
          margin:0 0;
          border: 30px solid red;
         }
      </style>
   </head>
   <body></body>
</html>

边框应在视口周围显示，但应隐藏在底部导航栏的后面。这是上面代码的结果：

我尝试过的事情（没有一个起作用）：

如下所述删除“ width = device-width”：空的HTML5页面仍然溢出，并在mobile上触发滚动条。
Reload the page with JS. The problem is fixed when a user refresh the page by hand,not programmatically.
Using transform to zoom in and out to force a refresh

I have tried for a week to find a workaround but to no avail. Any help would be greatly appreciated

Edit: My issue is different from HTML body not filling complete width on mobile devices as I don't have an issue with filling the body, I have an overflowing body issue and mobile chrome behaving differently on a new page as opposed to an existing page. The workarounds on the page didn't work for my issue

My question is the following: Can somebody find a way using css or JS for the HTML body to not overflow when a new page is opened using the code above?

coreuter

I've reproduced your problem and might have found a solution. I've found this which I think causes your problem:

[...] The core issue is that mobile browsers (I’m looking at you, Chrome and Safari) have a “helpful” feature where the address bar is sometimes visible and sometimes hidden, changing the visible size of the viewport. Rather than adjusting the height of 100vh to be the visible portion of the screen as the viewport height changes, these browsers instead have 100vh set to the height of the browser with address the address bar hidden. The result is that the bottom portion of the screen will be cut off when the address bar is visible, thus defeating the purpose of 100vh to begin with.

The article suggests that

One way to get around this issue is to rely on javascript instead of css. When the page loads, setting the height to window.innerHeight will correctly set the height to the visible portion of the window. If the address bar is visible, then window.innerHeight will be the height of the full screen. If the address bar is hidden, then window.innerHeight will be the height of just the visible portion of the screen, as you’d expect.

他们在评论中建议将内部高度存储在CSS变量中，在每次事件resize或orientationchange触发事件时刷新内部高度，并将其应用于html和body标签。在我的测试中，仅部分起作用。从链接访问页面的target="_blank"效果很好，但是刷新或直接访问页面将显示您通过链接访问页面时描述的问题。为了解决这个问题，我还在load活动期间更新了变量。在我的iPhone 6s和最新的Chrome应用上，通过链接或直接访问页面似乎现在可以正常工作。我希望这是您要寻找的：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=2, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <style>
      * {
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
      }

      body {
        background-color: yellow;
        margin: 0 0;
        border: 30px solid red;
      }
    </style>
  </head>

  <body></body>

  <script>
    function fixHeight() {
      document.documentElement.style.setProperty('--vh', `${window.innerHeight / 100}px`);
    };

    addEventListener('load', fixHeight);
    addEventListener('resize', fixHeight);
    addEventListener('orientationchange', fixHeight);
  </script>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-5

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

iPhone上的Chrome浏览器会在空白页上溢出内容（仅在新标签上，不会重新加载）

iPhone上的Chrome浏览器会在空白页上溢出内容（仅在新标签上，不会重新加载）

强制Google Chrome浏览器在重新加载时显示空白页

在Google Chrome浏览器中检测新的空白标签页空缺

最新的Google Chrome浏览器故障：标签页会自动重新加载

在Firefox / Chrome上打开新标签页或窗口时，如何获得新的浏览器会话？

按下网页上的按钮时，会在Google Chrome浏览器中加载新的网址

用于在新标签页上打开链接的Google Chrome浏览器快捷方式？

标签内容未在浏览器启动或撤消关闭标签上加载

Chrome浏览器随机打开新的空白标签

Chrome浏览器随机打开新的空白标签

Chrome浏览器的“清除浏览数据”不会清除打开的隐身标签页的Cookie吗？

浏览器同步不会在监视任务完成时重新加载页面

浏览器同步不会在监视任务完成时重新加载页面

当重新打开浏览器时，Chrome阻止更新所有标签页吗？

Overflow-x：hidden不会阻止内容在移动浏览器上的溢出

在新的Google Chrome浏览器中打开同步的标签页

Chrome浏览器的新标签页已更改，但我希望返回

Chrome浏览器的“新标签页”未显示访问量最高的页面

打开新标签页后，Chrome浏览器不再关注地址栏

在Google Chrome浏览器中打开新标签页时不显示缩略图

在Chrome浏览器中无法在新标签页中提交多个表单

Google Chrome浏览器会阻止在新标签页中打开的链接

Selenium：Chrome 中的同一浏览器未打开新标签页

如何在Chrome网络浏览器的当前标签页右侧打开新的标签页/链接？

Angular js应用程序在ios浏览器，Safari和chrome上都显示空白页面。在Windows桌面浏览器上工作正常

直接从浏览器地址栏访问时，反应返回空白页

IE 7、8、9、10的带有“不支持浏览器”的空白页

在现代浏览器中，内联元素不会在标签结尾之前折叠空白吗？

外部链接在Chrome的新浏览器窗口中以空白标签的形式打开

外部链接在Chrome的新浏览器窗口中以空白标签的形式打开