【发布时间】：2021-08-08 06:02:24
【问题描述】：
我有问题。在我的网站上，我每秒刷新一次数据，但这会导致字体每秒随机调整大小。要解决这个问题，我需要在我的 html 页面中添加以下内容：
<meta name="viewport" content="initial-scale=1">
只有这对我有 1 个问题。在我的桌面上，它没有效果，但是当我切换到我的手机时，页面宽度只使用了 40%，而我有以下 css：
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #DADADA;
width: 99%;
margin: auto auto;
}
这是之前和之后的示例图像：
唯一的区别是那一行。我已经发现这篇文章看起来像同样的问题：html tag stops being full width on skinny viewports，但该解决方案似乎对我不起作用，因为当我尝试他的解决方案时没有任何改变。我页面底部的表格是搞砸的事情之一，所以我将分享表格的所有代码：
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #DADADA;
width: 99%;
margin: auto auto;
}
.title {
display: block;
text-align: center;
color: #1D0F73;
font-size: 22px;
font-weight: bold;
padding: 5px;
}
#orderHistory {
margin-top: 30px;
border-style: solid;
border-color: black;
border-width: 1px;
}
#orderHistoryContent {
padding-top: 20px;
width: 100%;
padding: 0px;
}
#orderHistoryContent table {
width: 100%;
text-align: left;
border-collapse: collapse;
font-size: 14px
}
#orderHistoryContent table td, th {
border-style: solid;
border-color: black;
border-width: 1px;
padding: 3px 5px;
}
.priceCell {
text-align: right;
}
.order-history-header {
font-weight: bold;
}
.order-target-price {
visibility: visible;
}
.order-limit-price {
visibility: visible;
}
@media only screen and (max-width: 1100px) {
.order-target-price {
display: none;
}
.order-limit-price {
display: none;
}
}<html>
<head>
<meta charset="UTF-8">
<!-- This line prevents jumping fonts on a mobile device -->
<meta name="viewport" content="initial-scale=1">
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<!-- CSS FILES -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/orderHistory.css">
</head>
<body>
<div id="orderHistory">
<label class="title">Order history</label>
<div id="orderHistoryContent">
<table>
<tbody>
<tr>
<th>Action</th>
<th>Market</th>
<th>Coin</th>
<th>DateTimeEntered</th>
<th class="priceCell">Quantity</th>
<th class="priceCell">Amount</th>
<th class="order-target-price">Target price</th>
<th class="order-limit-price">Limit price</th>
<th class="priceCell">Price</th>
<th>DateTimeExecuted</th>
<th>Status</th>
<th class="priceCell">Profit</th>
</tr>
<tr style="border-style: solid; border-color: black; border-width: 1px;">
<td style="background-color: rgb(251, 216, 255);">Buy</td>
<td style="background-color: rgb(255, 255, 255);">USDT</td>
<td style="background-color: rgb(173, 204, 255);">ETH</td>
<td style="background-color: rgb(255, 227, 214);">2021-05-19 02:56:01</td>
<td class="priceCell" style="background-color: rgb(251, 255, 191);">0.59904000</td>
<td class="priceCell" style="background-color: rgb(251, 255, 191);">2012.27120640</td>
<td class="order-target-price" style="background-color: rgb(255, 227, 214);">0.000000</td>
<td class="order-limit-price" style="background-color: rgb(255, 227, 214);">0.000000</td>
<td class="priceCell" style="background-color: rgb(251, 255, 191);">3359.160000</td>
<td style="background-color: rgb(251, 255, 191);">2021-05-19 02:56:01</td>
<td style="background-color: rgb(210, 255, 209);">Executed</td>
</tr>
<tr style="border-style: solid; border-color: black; border-width: 1px;">
<td style="background-color: rgb(229, 196, 146);">Sell</td>
<td style="background-color: rgb(229, 229, 229);">USDT</td>
<td style="background-color: rgb(198, 229, 173);">BTC</td>
<td style="background-color: rgb(229, 204, 192);">2021-05-16 15:48:33</td>
<td class="priceCell" style="background-color: rgb(225, 229, 171);">0.04112200</td>
<td class="priceCell" style="background-color: rgb(225, 229, 171);">2014.25425280</td>
<td class="order-target-price" style="background-color: rgb(229, 204, 192);">0.000000</td>
<td class="order-limit-price" style="background-color: rgb(229, 204, 192);">0.000000</td>
<td class="priceCell" style="background-color: rgb(225, 229, 171);">48982.400000</td>
<td style="background-color: rgb(225, 229, 171);">2021-05-16 15:48:34</td>
<td style="background-color: rgb(189, 229, 188);">Executed</td>
<td class="priceCell" rowspan="0" style="background-color: rgb(155, 237, 137);">
<b>
+12.40$<br />
+0.62%
</b>
</td>
</tr>
<tr style="border-style: solid; border-color: black; border-width: 1px;">
<td style="background-color: rgb(251, 216, 255);">Buy</td>
<td style="background-color: rgb(255, 255, 255);">USDT</td>
<td style="background-color: rgb(220, 255, 193);">BTC</td>
<td style="background-color: rgb(255, 227, 214);">2021-05-16 15:29:55</td>
<td class="priceCell" style="background-color: rgb(251, 255, 191);">0.04116400</td>
<td class="priceCell" style="background-color: rgb(251, 255, 191);">1999.96817068</td>
<td class="order-target-price" style="background-color: rgb(255, 227, 214);">0.000000</td>
<td class="order-limit-price" style="background-color: rgb(255, 227, 214);">0.000000</td>
<td class="priceCell" style="background-color: rgb(251, 255, 191);">48585.370000</td>
<td style="background-color: rgb(251, 255, 191);">2021-05-16 15:29:56</td>
<td style="background-color: rgb(210, 255, 209);">Executed</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>这个例子的问题是表格穿过了外div边框，而我将外div的宽度设置为100%。 这是什么原因造成的，我该如何解决？
【问题讨论】：
-
你之前有哪个元标签？
<meta name="viewport" content="width=device-width, initial-scale=1.0">? -
在那之前我什么都没有