【发布时间】：2020-04-10 02:17:02
【问题描述】：
CSS 网格在实际的移动浏览器上显示不正确（但在桌面上测试移动屏幕时所有显示都正确）。
如果我在桌面浏览器上打开应用程序并使用浏览器对不同移动屏幕尺寸和类型的测试，我发现样式有效。
但是，如果我使用（实际）手机的浏览器单击该链接，我会发现样式不起作用。
即浏览器调试具有误导性。这是不一致的，而不是应该如何工作。
问题：
- 我错过了什么？为什么 devTools 与移动设备上的现实存在差异？
- 什么媒体查询可以在移动设备上修复这种样式，同时仍然保持它基于 CSS 网格（我没有尝试修复它）？
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;
}
}
相关反应代码：
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>
【问题讨论】：
-
你试过
@media规则CSS -
@KiranMistry 感谢您的提问。媒体查询被用于必要的地方，即页脚。如果您单击我在您的桌面上提供的第一个链接并使用浏览器对不同移动屏幕尺寸和类型的测试，您将看到样式有效。但是，如果您使用（实际）手机单击该链接，您会发现样式不起作用。浏览器调试具有误导性。这是不一致的，而不是应该如何工作。
-
您使用的是哪种手机浏览器？r
-
也将您的 HTML 发布到问题中。
-
@Pete 感谢您的提问。在桌面上：在 Safari、Chrome 和 Brave 中尝试过。在移动设备上：Safari、Chrome 和 Opera