Safari 中的 CSS 变量

问题描述 投票：0回答：1

我正在创建一个使用 css 和 html 的应用程序。

一个页面使用 css 媒体查询以及 display:grid

所有尺寸在除 Safari 之外的所有浏览器上看起来都不错。大小似乎无法正确计算，并且网格行会合并到自身中。

有人有这方面的经验吗？

我有一个名为 --vh 的变量，它是 window.innerHeight 的 1%，这样我就可以取消浏览器工具栏。这工作正常，只是不适用于 Safari 中的媒体查询。

如有任何帮助，我们将不胜感激。

如果您想尝试现场访问https://trivia.house 在笔记本电脑或设备上托管游戏，然后在支持 Safari 的设备上加入游戏。问题在于第一个问题屏幕，应用程序将停止并保持。如果你在边缘或镀铬上做同样的事情，它会渲染得很好。

其他信息：

这就是它的渲染方式 - 请原谅 safari 的质量差！

enter image description here

这是渲染的代码：（我尝试过 SVH 和 DVH，同样的情况发生）

HTML：

<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应用程序，大量的CSS都捆绑在一起。如果您需要完整的内容，请告诉我...如上所述，您可以访问该网站并亲自查看：

#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;
}

}
css
1个回答
1
投票

你不需要变量，你只需要使用小视口单位 - 

svh
。值 
1svh
将等于您的变量 
var(--vh)
。

CSS 规范现在包括 

vh
的三个附加变体：
svh
、
lvh
和 
dvh
。 在这里阅读有关它们的信息。这些变体说明了移动浏览器中工具栏的各种配置。您可以在所有主要浏览器中使用这些变体。

请注意，iOS Safari 目前有一个 bug（已于 2024 年 3 月修复），其中 

svh
和 
dvh
在所有情况下都会产生相同的值。不过，这可能不会影响你想做的事。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.