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) を搭載した Samsung Galaxy S2 にあります。

更新: px、em、% などのいくつかの順列を試してみましたが、役に立ちませんでした。回答で提案されている回避策 (モバイル ブラウザーを検出し、別のレイアウトを指定する) を使用できますが、同じフォントとして指定されたテキストのレンダリングが異なる理由を知りたいです。

4

1 に答える 1

0

ブラウザだけでなく、デバイスに対応したコードを作成する必要があります。デバイスとブラウザを検出する必要があります。こちらをご覧ください。このリンクは、解像度固有のスタイルシートを作成する方法についてのアイデアを提供します。これも便利なリンクです。

emを使用してフォント サイズを定義することをお勧めします。

于 2013-09-26T03:58:05.787 に答える