Question

我有一个简单的页面，它结合了纯文本和表格。这是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倍，因为它在屏幕上的大小相同。为什么会发生这种情况，我能否克服它？

这是在三星Galaxy S2上使用最新的Firefox浏览器（v24）。

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

Answer 1

您需要为设备和浏览器制作兼容代码。您需要检测设备和浏览器，看看here。这个link会给你一些想法，如何制作特定分辨率的样式表。这也是一个有用的link。

使用em来定义字体大小更可取。

元素不会在移动设备上同等调整大小

1 个答案: