iPhone竖屏模式下HTML表格超出屏幕问题求助

你的问题主要由几个细节导致：iOS Safari的viewport默认缩放行为、元素默认内外边距、表格未启用border-box盒模型、固定宽度单元格在小屏的布局挤压，以及float布局带来的对齐不稳定。以下是针对性的修复步骤：

1. 修正Viewport元标签 #

添加shrink-to-fit=no，强制iOS Safari按设备宽度适配，避免自动缩放导致的溢出：

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

2. 重置Body默认样式 #

清除body的默认内外边距，避免额外空间占用：

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

3. 优化表格布局 #

• 给表格设置box-sizing: border-box，让边框和内边距纳入宽度计算，防止超出容器
• 用width:100%替代98%，保证完全适配容器：

<table border="1" style="width:100%; box-sizing: border-box;">

4. 适配固定宽度单元格 #

把固定width:185px改成max-width:185px，让单元格在小屏自动收缩，避免挤压整体布局：

<td style="max-width:185px; width: 100%;">

5. 修复Log Out对齐问题 #

用Flex布局替代float，实现稳定的左右对齐，避免错位：

<div style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
  <b>Feed for Paul</b>
  <b><a href="webLogOut.php">Log Out</a></b>
</div>

完整修复后的代码 #

<html>
<head>
  <title>Feed</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <link rel="icon" type="image/x-icon" href="/images/Icon.jpg">
  <style>
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
    <b>Feed for Paul</b>
    <b><a href="webLogOut.php">Log Out</a></b>
  </div>
  <p style="padding: 0 10px;">Post <a href="webFindShow.php">TV Show or Movie</a></p>
  <table border="1" style="width:100%; box-sizing: border-box;">
    <tr>
      <td colspan="3" style="line-height:4em; padding: 0 10px;">
        <span style="text-align:left;vertical-align:middle;">Wednesday | 5 <img src="/images/goldStarOutlined.png" alt="star" width="20" height="20"> | <a href="vote.php?user=1&feed_id=295&vote_type=1">1 <img src="/images/ThumbsUpGreen.png"></a> <a href="vote.php?user=1&feed_id=295&vote_type=2">0 <img src="/images/ThumbsDownRed.png"></a></span>
        <span style="float:right;vertical-align:middle;">Paul</span>
      </td>
    </tr>
    <tr>
      <td style="max-width:185px; width: 100%;"><img src="http://image.tmdb.org/t/p/w185/jeGtaMwGxPmQN5xM4ClnwPQcNQz.jpg" style="width: 100%;"></td>
      <td style="padding: 10px;">Very well done show.</td>
    </tr>
  </table>
</body>
</html>

内容的提问来源于stack exchange，提问作者Paul K.