ios safari 100vh

Posted 2023-05-16 biage

/**
 * ios safari 100vh(整个页面的vh全部改为以下写法才生效)
 * 1、全局css增加 :root
 * 2、onMounted中调用safariHacks方法
 * 
 *  max-height: 80vh;
 *  max-height: calc(var(--vh) * 80);
 *  或者
 *  height: calc(100vh - 132rpx);
 *  height: calc(var(--vh, 1vh) * 100 - 132rpx);
 * 
 */


1、
:root 
  --vh: 1vh;


2、

function setCorrectViewHeight () 
  // #ifdef H5
  const windowsVH = window.innerHeight / 100
  document.documentElement.style.setProperty(\'--vh\', windowsVH + \'px\')
  // #endif


export const safariHacks = () => 
  // #ifdef H5
  setCorrectViewHeight()
  // window.addEventListener(\'load\', setCorrectViewHeight)
  window.addEventListener(\'resize\', setCorrectViewHeight)
  // #endif

　　

src 元素 100vh 的 iframe iOS 问题

【中文标题】src 元素 100vh 的 iframe iOS 问题

【英文标题】：iframe iOS problems with src element 100vh

【发布时间】：2016-06-09 23:49:44

【问题描述】：

我有一个正在输出网站的 iframe。 src网站使用100vh的大英雄来计算高度。在 iframe 中，除了 iOS 设备外，一切都很好。似乎英雄的 100vh 正在将 iframe 页面的整个高度拉伸到其他元素上，而不仅仅是当前视口。

HTML

<div class="wrapper">
    <iframe src="[website url]"></iframe>
</div>

CSS

 .wrapper
    height: 100%;
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    


.wrapper iframe
  display: block;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0 none;
  box-sizing: border-box;


body  margin:0 

问题是在 iOS 上，来自 src 网站的 hero 部分会拉伸 iframe 的整个高度

HTML

<section class="hero">
</section>

CSS

background-size: cover !important;
background-position: center center !important;
position: relative;
height: 100vh;

这个问题似乎只存在于 iOS 中，在其他所有设备上都很好。

任何帮助都会很棒！

【参考方案1】：

据我所知，Safari 在 iOS 6 - 7 渲染元素上存在问题，在 CSS 中设置了 height: 100vh。

【讨论】：

我使用的是 iOS 9，但问题仍然存在。不过谢谢！

这是一种解决方法，但是您可以通过媒体查询规则将 iframe 属性更改为：html, body height:100%;.wrapper iframe position:absolute;top:0;left:0;width:100%; height:100%; via，[链接]：***.com/questions/23027068/…

3 年后仍然是一个问题。在 iOS 上的 iframe 中，vh 不是基于 iframe 的视口高度，而是基于 iframe 内所有内容的高度。这对我使用 vh 造成了重大限制，并且在嵌入 iOS 时完全破坏了 vh 的实现。