我正在创建一个使用css和html的应用程序。
一个页面使用了一个CSS媒体查询沿着display：grid
所有的大小似乎都很好，除了Safari的所有浏览器。大小似乎没有正确计算，网格行合并到自己。
有人有这方面的经验吗？
我得到了一个名为--vh的变量，它是window.innerHeight的1%，这样我就可以否定浏览器的工具栏。这很好用，只是在safari中的媒体查询中不行。
如果你能帮忙的话，我将不胜感激。
如果你想尝试一下，请访问https://trivia.house在笔记本电脑或设备上托管一个游戏，然后在支持safari的设备上加入游戏。问题在于应用程序将停止并保持的第一个问题屏幕。如果你在边缘或 chrome 上做同样的事情，它会渲染得很好。
其他信息：
这就是它如何渲染-原谅狩猎之旅的质量差！
x1c 0d1x的数据
下面是渲染的代码：（我试过SVH和DVH，也发生了同样的情况）
超文本标记语言：
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="https://trivia.house/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#000000">
<meta name="description" content="Free Multiplayer Online Trivia Quiz Games">
<link rel="manifest" href="/manifest.json">
<title>Carousel Quiz | Free Multiplayer Online Games | Trivia House</title>
<script defer="defer" src="/static/js/main.d9851aae.js"></script>
<link href="/static/css/main.69f4b861.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div class="App">
<div class="AppResolution">
<p id="ResolutionIssueMessage">THIS APPLICATION CAN ONLY BE RUN ON A PORTRAIT-ORIENTATED DEVICE, PLEASE EXPAND THE BROWSER WINDOW TO A SUPPORTED SIZE.</p>
</div>
<div class="AppContent">
<div id="questionWrapper">
<div id="questionContainer">
<div className="questionBox title">
<div className="vText">
<img id="titleQuestion" src='' />
</div>
</div>
<div id="roundInfo" className="questionBox roundInfo"><div className='vText'>Question 1</div></div>
<div id="gameCode" className="questionBox gameCode"></div>
<div id="question" className="questionBox question"><div className='vText'>question</div></div>
<div id="scores" className="questionBox scores">Scores</div>
<div id="answer1" className="questionBox answer1"><div className='vText'>answer1</div></div>
<div id="answer2" className="questionBox answer2"><div className='vText'>answer2</div></div>
<div id="answer3" className="questionBox answer3"><div className='vText'>answer3</div></div>
<div id="answer4" className="questionBox answer4"><div className='vText'>answer4</div></div>
<div id="timer" className="questionBox timer"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>字符串
CSS：
这是这个问题的主要CSS，但可能会有一些缺失，因为它是一个带有大量CSS的React应用程序。如果你需要整个让然后让我知道...如上所述，您可以访问该网站并亲自查看：
#questionWrapper{
width: 100%;
height: calc((var(--containerheight)) * 100px);
margin: 0 auto;
border: black 1px solid;
}
#questionContainer{
display:grid;
grid-gap: 5px;
grid-template-columns: calc(35% - 5px) calc(35% - 5px) calc(30%);
grid-template-rows: 0.8fr 0.8fr 1.8fr 1fr 1fr 1fr;
height: calc((var(--containerheight)) * 100px);
}
.questionBox {
background-color: rgba(224, 38, 63, 0.6);
color: #fff;
border-radius: 15px;
padding: 20px;
font-size: calc(1vh + 1vw);
font-weight: 800;
text-align: center;
}
#titleQuestion{
width: 100%;
animation: bounce-in-right 2s ease;
max-width: 600px;
}
.title {
display: table;
overflow: clip;
background-color: rgba(224, 38, 63, 0);
text-align: center;
grid-column: 1/3;
grid-row: 1/3;
padding-top: 50px;
}
.roundInfo {
display: table;
grid-column: 3/4;
grid-row: 1/2;
font-size: calc(1.25vh + 1.25vw);
}
.gameCode {
text-align: center;
grid-column: 3/4;
grid-row: 2/3;
background-color: rgba(224, 38, 63, 0);
}
.question {
display: table;
background-color: rgba(224, 38, 63, 0);
font-size: calc(1.4vh + 1.4vw);
color: rgba(224, 38, 63, 1);
grid-column: 1/3;
grid-row: 3/4 ;
}
.scores {
grid-column: 3/4;
grid-row: 3/7;
}
.answer1 {
display: table;
grid-column: 1/2;
grid-row: 4/5;
}
.answer2 {
display: table;
grid-column: 2/3;
grid-row: 4/5;
}
.answer3 {
display: table;
grid-column: 1/2;
grid-row: 5/6;
}
.answer4 {
display: table;
grid-column: 2/3;
grid-row: 5/6;
}
.timer {
grid-column: 1/3;
grid-row: 6/7;
}
.vText{
display: table-cell;
vertical-align:middle;
}
/***************************************************************/
@media (max-width: 1000px){
#questionContainer{
display:grid;
grid-gap: calc((var(--containerheight))*0.5px);
grid-template-columns: 100%;
grid-template-rows: 0px calc((var(--containerheight))*10px) calc((var(--containerheight))*26px) repeat(5,calc((var(--containerheight))*12px));
height: 100%;
width: 100%;
}
.questionBox {
background-color: rgba(224, 38, 63, 0.6);
color: #fff;
border-radius: 15px;
font-size: calc(1.2vh + 1.2vw);
font-weight: 800;
text-align: center;
}
.roundInfo {
display: table;
grid-column: 1/2;
grid-row: 2/3;
}
.question {
display: table;
background-color: rgba(224, 38, 63, 0);
font-size: calc(1.2vh + 1.2vw);
color: rgba(224, 38, 63, 1);;
grid-column: 1/2;
grid-row: 3/4;
}
.answer1 {
display: table;
grid-column: 1/2;
grid-row: 4/5;
}
.answer2 {
display: table;
grid-column: 1/2;
grid-row: 5/6;
}
.answer3 {
display: table;
grid-column: 1/2;
grid-row: 6/7;
}
.answer4 {
display: table;
grid-column: 1/2;
grid-row: 7/8;
}
.timer {
display: table;
grid-column: 1/2;
grid-row: 8/9;
}
#GameCodeWidget{
display: none;
}
#gameCode{
display: none;
}
.title{
display: none;
}
.scores{
display: none;
}
}型
1条答案
按热度按时间7gcisfzg1#
你不需要变量，你只需要使用小的viewport单位-
svh。值1svh将等于变量var(--vh)。CSS规范现在包含了
vh的三个额外变体：svh、lvh和dvh。在这里阅读它们。这些变体解释了移动的浏览器中工具栏的各种配置。您可以在all major browsers中使用这些变体。请注意，iOS Safari目前有一个bug，其中
svh和dvh在所有情况下都产生相同的值。但是，这可能不会影响您想要做的事情。