0

我有一个简单的页面，它结合了纯文本和表格。这是html：

<body>
<div id='stat'>
  <p class='subheading'>Stat of the Week: Average Final Standings</p>
  <p class='text'>Each week, I'll be giving a stat from the history of the league. Feel free to suggest any stat you want to see here in future weeks. This week's stat is Average Final Standings. In other words, what is the average finishing place of each owner through the history of the league.  Here are the results:</p>
  <table class='tableBody' style='margin: auto;'>
    <tr class='tableHead'><td colspan='3'>Average Finish</td></tr>
    <tr class='tableSubHead'>
      <td>Team Owner</td><td>Years Played</td><td>Average Place</td>
    </tr>
    <tr class='light'>
      <td class='nocenter'>Team #1</td><td>2007-2012</td><td>5.04</td>
    </tr>
    <!-- more rows here -->
  </table>

  <p class='text'>Up Next Week: Average Points Per Week</p>
</div>
</body>

和CSS：

body {
  background-image: url(http://g.espncdn.com/s/ffllm/13/images/shell/bgHead.jpg);
  background-repeat: no-repeat;
  padding: 0px;
  padding-top: 10px;
  font-size: 14px; 
  margin: 0px; 
  color: #000; 
  font-family: verdana, arial, helvetica, sans-serif;
}

.tableBody {
  font-size: 1em;
  color: #000;
  text-decoration: none;
  text-align: center;
  width:50%;
}

.nocenter {
  text-align: left;
}

.tableBody td {
  padding: 5px;
}

.tableHead {
  font-size: 1.2em;
  color: #fff;
  padding: 5px;
  background-color: #6dbb75;
  text-align: center;
}

.tableSubHead {
  font-size: 1.1em;
  color: #000;
  padding: 5px;
  background-color: #6dbb75;
  text-align: center;
}

.light {
  background-color: #f8f8f2;
}

.dark {
  background-color: #f2f2e8;
}

在我的笔记本电脑浏览器上，一切看起来都很棒。问题是当我在手机上查看页面时。除表格外，所有页面看起来都很好。它很小！我必须使字体大小几乎大 3 倍才能在屏幕上保持相同大小。为什么会发生这种情况，我可以克服它吗？

这是在带有最新 Firefox 浏览器 (v24) 的三星 Galaxy S2 上。

更新：我尝试了 px、em、% 等的几种排列，但均无济于事。我可以使用答案中提出的解决方法（检测移动浏览器并指定不同的布局），但我想知道指定为相同字体的文本呈现不同的原因。

4

1 回答 1

0

You need to make the compatible code for the devices as well as browser. You need to detect device and browser, take a look here. This link will give you some idea, how to make resolution specific style-sheet. This is also a useful link.

Use em to define font size is preferable.

于 2013-09-26T03:58:05.787 回答