CSS网格未在实际的移动浏览器上正确显示（尽管在台式机上测试移动屏幕时，所有显示均正确显示）

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

CSS网格未在实际的移动浏览器上正确显示（尽管在台式机上测试移动屏幕时，所有显示均正确显示。

[如果我在台式机的浏览器中打开应用程序，并使用浏览器对不同的移动屏幕尺寸和类型进行测试，则可以看到样式有效。enter image description here

但是，如果我使用（实际）手机浏览器单击该链接，则会发现该样式无效。enter image description here

即浏览器调试会产生误导。这是不一致的，而不是应该如何工作的。

我想念什么？

  body {
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 400;
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      background: #53687e;
      background: linear-gradient(120deg, #53687e, hsl(0, 0%, 18%)) fixed;
    }

    #calculator {
      margin: 0 auto;
      text-align: center;
      padding-top: 100px;
    }

    .container {
      position: relative;
      line-height: 1.5;
      display: flex;
      align-items: center;
      justify-content: center;
        padding-bottom: 50px;
    }

    .key-group {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 10px;
      align-items: center;
      justify-content: center;
      background-color: #000;
      padding: 8px;
      border-radius: 8px;
      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);

    }


    .key-pad {
      cursor: pointer;
      background: #33373f;
      color: #ffff;
      border-radius: 8px;
      font-size: 2.5rem;
      border-style: none;
      padding-right: 50px;
      padding-bottom: 50px;
      padding-left: 50px; */
    }

    .display {
      grid-column: 1 / span 4;
      grid-row: 1;
      color: #51aaff;
      background: none;
      height: 5rem;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
    }
    .seven {
      grid-column: 1 / span 1;
            grid-row: 2;
    }
    .eight {
      grid-column: 2 / span 1;
            grid-row: 2;
    }
    .nine {
      grid-column: 3 / span 1;
            grid-row: 2;
    }
    .divide {
      grid-column: 4 / span 1;
      grid-row: 2;
      color: #51aaff;
      background-color: #1e242c;
    }
    .four {
      grid-column: 1 / span 1;
      grid-row: 3;
    }
    .five {
      grid-column: 2 / span 1;
      grid-row: 3;
    }
    .six {
      grid-column: 3 / span 1;
      grid-row: 3;
    }
    .multiply {
      grid-column: 4 / span 1;
      grid-row: 3;
      color: #51aaff;
      background-color: #1e242c;
    }
    .one {
      grid-column: 1 / span 1;
      grid-row: 4;
    }
    .two {
      grid-column: 2 / span 1;
      grid-row: 4;
    }
    .three {
      grid-column: 3 / span 1;
      grid-row: 4;
    }
    .subtract {
      grid-column: 4 / span 1;
      grid-row: 4;
      color: #51aaff;
      background-color: #1e242c; 
    }
    .zero {
      grid-column: 1 / span 1;
      grid-row: 5;
    }
    .decimal {
      grid-column: 2 / span 1;
      grid-row: 5;
    }
    .clear {
      grid-column: 3 / span 1;
      grid-row: 5;
      color: #51aaff;
      background-color: #1e242c;
      font-size: 2rem;
      height: 100%;
      width: 100%;  
    }
    .add {
      grid-column: 4 / span 1;
      grid-row: 5;
      color: #51aaff;
      background-color: #1e242c;
    }
    .equals {
      grid-column: 1 / span 4;
      grid-row: 6;
      color: #51aaff;
      background-color: #1e242c;
    }


    footer {
      position: fixed;
        font-size: small;
      color: #fff;
      background-color: #262626;
        display: flex;
      width: 100vw;
      height: 4rem;
      bottom: 0;
    }

    .footer-options {
            width: 50vw;
            display: flex;
            justify-content: flex-start;
        padding-inline-start: 20px;
        align-items: center;
    }


    footer span {
            width: 50vw;
            display: flex;
            justify-content: flex-end;
            padding: 0 20px;
        align-items: center;
        }

    @media (max-width: 900px)  {

        footer {
                    flex-wrap: wrap;
            height: 5rem;  
        }

        .footer-options {
            width: 100vw;
            flex-direction: row;
            justify-content: center;
        padding-inline-start: 0;
        align-items: center;
        }

        footer span {
                    width: 100vw;
                    flex-direction: column;
                text-align: center;
            align-self: flex-start;
        }
    }

[您可以在移动设备上使用此链接来了解我的意思：https://cdpn.io/pamora/debug/gObrwLz/gaMeYzBEOJdM（忽略Codepen关于它们（Codepen）尚未针对移动设备进行优化的通知。当代码在Codepen外部部署时，其显示与在Codepen中，即样式错误）。然后，如果使用浏览器的移动屏幕测试在桌面上调试此样式，则所有样式都是完美的...

您还可以在这里找到代码：https://codepen.io/pamora/pen/gObrwLz?editors=0100

相关的React代码：

return (        
    <React.Fragment>
        <header>
        {/* <h1>Calculator</h1> */}
        </header>
        <div id="calculator">
  <div className="container">
            <div className="key-group">

      <div id="display" className="key-pad display">{display != 0 ? display : 0}</div>                   
    <button id="seven" className="key-pad seven" onClick={() => Input(7)}>7</button>
      <button id="eight" className="key-pad eight" onClick={() => Input(8)}>8</button>
      <button id="nine" className="key-pad nine" onClick={() => Input(9)}>9</button>
      <button id="divide" className="key-pad divide" onClick={() => {Operator("/")}}>÷</button>
      <button id="four" className="key-pad four" onClick={() => Input(4)}>4</button>
      <button id="five" className="key-pad five" onClick={() => Input(5)}>5</button>
      <button id="six" className="key-pad six" onClick={() => Input(6)}>6</button>       
      <button id="multiply" className="key-pad multiply" onClick={() => {Operator("*")}}>×</button>              
      <button id="one" className="key-pad one" onClick={() => Input(1)}>1</button>
      <button id="two" className="key-pad two" onClick={() => Input(2)}>2</button>
      <button id="three" className="key-pad three" onClick={() => Input(3)}>3</button>
      <button id="subtract" className="key-pad subtract" onClick={() => {Operator("-")}}>-</button>
      <button id="zero" className="key-pad zero" onClick={() => Zero()}>0</button>
      <button id="decimal" className="key-pad decimal" onClick={() => Decimal()}>.</button>
      <button id="clear" className="key-pad clear" onClick={() => Clear()}>AC</button>
      <button id="add" className="key-pad add" onClick={() => {Operator("+")}}>+</button>       
      <button id="equals" className="key-pad equals" onClick={()=>Equals()}>=</button>   
    </div>      
  <footer>
    <ul className="footer-options">
  <li className="footer-link"><a href="#" className="footer-linktext">Legal</a></li>
  <li className="footer-link"><a href="#" className="footer-linktext">Contact Us</a></li>
</ul>
<span>© 2019 Developed by Pat. All Rights Reserved.</span>
       </footer>
                </div>
            </div>
        </React.Fragment>
      )

HTML：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Calculator</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Unica+One&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    </head>
    <body>
      <div id="app">
      </div> 
    </body>
    </html>
css css-grid
1个回答
0
投票

我已经从您的html中更改了一些code，但我使用的是flexbox而不是grid。

这里是example：

HTML

<div class="calculator" id="calculator">
    <div class="container">
        <div class="key-area">
            <div id="display" class="display">0</div>
            <div class="key-group">
                <div class="key-item"><button id="seven" class="key-pad seven">7</button></div>
                <div class="key-item"><button id="eight" class="key-pad eight">8</button></div>
                <div class="key-item"><button id="nine" class="key-pad nine">9</button></div>
                <div class="key-item"><button id="divide" class="key-pad divide">÷</button></div>
                <div class="key-item"><button id="four" class="key-pad four">4</button></div>
                <div class="key-item"><button id="five" class="key-pad five">5</button></div>
                <div class="key-item"><button id="six" class="key-pad six">6</button></div>
                <div class="key-item"><button id="multiply" class="key-pad multiply">×</button></div>
                <div class="key-item"><button id="one" class="key-pad one">1</button></div>
                <div class="key-item"><button id="two" class="key-pad two">2</button></div>
                <div class="key-item"><button id="three" class="key-pad three">3</button></div>
                <div class="key-item"><button id="subtract" class="key-pad subtract">-</button></div>
                <div class="key-item"><button id="zero" class="key-pad zero">0</button></div>
                <div class="key-item"><button id="decimal" class="key-pad decimal">.</button></div>
                <div class="key-item"><button id="clear" class="key-pad clear">AC</button></div>
                <div class="key-item"><button id="add" class="key-pad add">+</button></div>
                <div class="key-item"><button id="equals" class="key-pad equals">=</button></div>
            </div>   
        </div>
    </div>
</div>

CSS

*:after, *:before {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
body {
        font-family: 'Helvetica Neue', sans-serif;
        font-weight: 400;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
        background: #53687e;
    background: linear-gradient(120deg, #53687e, hsl(0, 0%, 18%)) fixed;
}
.calculator .container {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
}
.calculator .container .key-area {
  background-color: black;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
     -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
          box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
}
.calculator .container .key-area .display {
  cursor: pointer;
  background: transparent;
  font-size: 2.5rem;
  border: none;
  color: #51aaff;
  text-align: right;
  padding: 8px 8px 0;
}
.calculator .container .key-area .key-pad {
  cursor: pointer;
  background: #33373f;
  border-radius: 5px;
  color: #ffff;
  font-size: 2rem;
  border: none;
  padding: 8px;
  width: 100%;
}
.calculator .container .key-area .key-pad.divide, .calculator .container .key-area .key-pad.multiply, .calculator .container .key-area .key-pad.subtract, .calculator .container .key-area .key-pad.clear, .calculator .container .key-area .key-pad.add, .calculator .container .key-area .key-pad.equals {
  color: #51aaff;
  background-color: #1e242c;
}
.calculator .container .key-area .key-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.calculator .container .key-area .key-group .key-item {
  -webkit-flex-basis: 25%;
      -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
     -moz-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  max-width: 25%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 8px;
}
.calculator .container .key-area .key-group .key-item:last-child{
  flex-basis: 100%;
  max-width: 100%
}

Codepen有box-sizing问题，原因是我对每个box-sizing使用class。您可以使用全局box-sizing，即：*:after,*:before{box-sizing: border-box;}。

我将max-width用于container。您可以在max-width或@media (max-width:*)中更改@media (min-width:*)。

希望此帮助！。

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