如何在移动 Safari 中修复 vh（视口单位）css？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23223157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix vh(viewport unit) css in mobile Safari?
提问by Alvaro
I've used vh (viewport units) css in one of my projects but in mobile safari it doesn't work. It seems like Safari doesn't know what to do with vh, but it works fine in other browsers. I would like to make the same effect with or without vh please help me. By the way I'm using facebox. (height:50% doesnt work fine)
我在我的一个项目中使用了 vh（视口单位）css，但在移动 safari 中它不起作用。Safari 似乎不知道如何处理 vh，但它在其他浏览器中运行良好。我想在有或没有 vh 的情况下产生相同的效果，请帮助我。顺便说一下，我正在使用facebox。（高度：50% 不起作用）
html:
html：
<div id="facebox" style="top: 0px; left: 0px; display: block;">
<div class="popup">
<div class="body">
<div class="content_light">
<div class="Lcontent_left"></div>
<div class="Lcontent_right">
<div class="Lright_content"></div>
</div>
</div>
</div>
</div>
</div>
This is my css:
这是我的CSS：
#facebox .popup {
display:block;
position:relative;
margin:auto;
margin-top:0%;
min-height:100vh;
height:1px;
border-radius:5px;
}
#facebox .body {
padding:0px;
display:block;
position:relative;
background: #fff;
width:100%;
min-height:100vh;
height:1px;
margin:auto;
border-radius:5px;
}
.Lcontent_left{
position:relative;
float:left;
width:100%;
height:50vh;
/*min-height:250px;*/
text-align:center;
overflow:hidden;
}
.Lcontent_left_fullscreen{
display:none;
}
.Lcontent_right{
float:left;
text-justify:inter-word;
position:relative;
width:100%;
height:50vh;
background-color:white;
overflow:auto;
font-family:"Open Sans",Helvetica,sans-serif;
}
.Lright_content{
position:relative;
width:95%;
margin:auto;
margin-left:5px;
overflow:auto;
height:50vh;
word-wrap:break-word;
line-height: 1.5;
font-size:16px;
overflow:auto;
}
回答by Rembrand
I came across this fix today: https://github.com/rodneyrehm/viewport-units-buggyfillIt checks every element for a vh/vw unit and turns it into px. Well worth checking out I think.
我今天遇到了这个修复：https: //github.com/rodneyrehm/viewport-units-buggyfill它检查 vh/vw 单元的每个元素并将其转换为 px。我认为值得一试。
回答by Koushik Das
You can use jQuery in order to fix that.
您可以使用 jQuery 来解决这个问题。
$('container').height($(window).height()/2);
This works on every browser. Hope it helps.
这适用于每个浏览器。希望能帮助到你。
回答by Praneeth Nidarshan
I also had this issue, here is my solution.
我也有这个问题，这是我的解决方案。
This is equals to height:100vh;
这等于height:100vh；
document.getElementById("your-element").style.height = window.innerHeight + 'px';
You can also use below code with jQuery,
您还可以将以下代码与jQuery 一起使用，
$('your-element').height(window.innerHeight + 'px');
Checked with safari :)
用野生动物园检查:)
回答by Cris
I used this CSS only hax today and it worked. iOS 8.2 iPhone Safari :
我今天只使用了这个 CSS hax，它奏效了。iOS 8.2 iPhone Safari：
html, body {
...
width: -webkit-calc(100% - 0px);
...
}
Thought:Using calc seems to get Safari to convert units to px itself. Now my page is correctly full-bleed on Chrome and Safari on iOS.
想法：使用 calc 似乎让 Safari 将单位转换为 px 本身。现在我的页面在 iOS 上的 Chrome 和 Safari 上正确地全出血。
回答by user2394342
There's a pretty good answer to this across at CSS Tricks - https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
在 CSS Tricks 中有一个很好的答案 - https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
.my-element {
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
}
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
回答by vulp
If you need a fullscreen div on mobile browsers, try using wrapper with fixed position and height set to 100%. Then set 100% height to your popup. You can adjust the position of the wrapper and popup in a way you like with top, left, right, bottom properties, as well as height and width.
如果您需要在移动浏览器上使用全屏 div，请尝试使用固定位置和高度设置为 100% 的包装器。然后将 100% 高度设置为您的弹出窗口。您可以使用顶部、左侧、右侧、底部属性以及高度和宽度以您喜欢的方式调整包装器和弹出窗口的位置。
These eliminates the problem with mobile browsers address bar autohiding in my case where I had to create a fullscreen popup on mobile chrome.
在我必须在移动 chrome 上创建全屏弹出窗口的情况下，这些消除了移动浏览器地址栏自动隐藏的问题。
回答by apptaro
I found this library very useful: https://github.com/Hiswe/vh-check
我发现这个库非常有用：https: //github.com/Hiswe/vh-check
It will calculate the offset value for the correct vh, and put it in a css variable so you can use it in the css:
它将计算正确 vh 的偏移值，并将其放入 css 变量中，以便您可以在 css 中使用它：
.main {
height: calc(100vh - var(--vh-offset, 0px));
}
回答by Володимир Хоменко
My version is "querySelector" because: if I use class of element "getelementbyid" not worked.
And this way js is most universal if jQuery libraries are not connected.
document.querySelector("your-element").style.height = window.innerHeight + 'px';
我的版本是“querySelector”，因为：如果我使用元素类“getelementbyid”不起作用。如果未连接 jQuery 库，这种方式 js 是最通用的。
document.querySelector("your-element").style.height = window.innerHeight + 'px';
