我在论坛上搜索了很久才发帖，所以请多多关照!
我有一个已有 20 年历史的网站，需要以最简单的方式使其适合移动设备，主要是通过 CSS(该网站到目前为止有近 2200 个页面，因此手动编辑单个页面几乎是不可能的)。
在不牺牲某些布局要求的情况下，即使是最简单的页面也很难被 Google 归类为适合移动设备的页面。在这种情况下，将内容居中似乎会导致 Google 给出“页面不适合移动设备”的失败结果。
我已经重写了旧的 html 并且现在已经将 css 硬写到页面中直到我让它工作并且可以将它传输到 css 工作表。
我使用 320 像素作为 div 宽度，因为这为我提供了一个很好的 Google 测试起点。但是使用“margin-left: auto; margin-right: auto;”将页面内容居中生成 Google 移动测试失败。拿出来，页面就过去了。
将 div 更改为 100% 并将图像宽度设置为 320px 通过，但它也删除了页面居中。然后增加图像宽度以适应更大的移动显示器会导致 Google 失败。我似乎在兜圈子，所以我可以听取一些建议。
下面的代码显示了页面现在的位置 - 居中但由于内容不适合屏幕而生成 Google 失败。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<base target="_top" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="text-align: center; overflow-x: hidden;">
<div style="width: 320px; margin-left: auto; margin-right: auto;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" id="Popup1">
<tr>
<td width="100%">
<img border="0" src="../images/Americas/North/Native_Powhatan_Tribe01_max.jpg" alt="Test" style="max-width: 100%; width: 100%;" height="auto"><!-- Image width is 1000px --></td>
</tr>
</table>
</div>
</body>
</html>
这是页面当前状态的实时版本: http://www.historyfiles.co.uk/KingListsAmericas/NorthPowhatan_Tribe01_Full.htm
这是页面的测试微型站点版本，包含我的所有编辑: http://www.historyfiles.co.uk/microsite_live/KingListsAmericas/NorthPowhatan_Tribe01_Full.htm
(图片大小和容器似乎是问题所在，所以现在其他的都被去掉了)。
最佳答案
BODY 具有默认的边距/填充值。首先，重置它们 margin:0;padding:0 并为全宽/适合屏幕添加 width:100%。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<meta http-equiv="Content-Language" content="en-gb">
<link rel="stylesheet" type="text/css" href="http://www.historyfiles.co.uk/microsite_live/css/history_mainstyles.css" />
<meta name="ROBOTS" content="noindex, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<base target="_top" /><meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<style type="text/css" media="all" />
@import "http://www.historyfiles.co.uk/microsite_live/css/history_substyles.css";
</style>
</head>
<!-- I changed this line. -->
<body style="width:100%;margin:0;padding:0">
<div style="width:320px;margin:0 auto">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" id="Popup1">
<tr>
<td width="100%">
<img border="0" src="https://via.placeholder.com/1000x500/4B89DA/F4F6F9" alt="Test" width="100%"><!-- Image width is 1000px --></td>
</tr>
<tr>
<td width="100%" height="10">
</td>
</tr>
<tr>
<td width="100%">
<p class="popuptitle">Captain John Smith</p>
</td>
</tr>
<tr>
<td width="100%">
<p class="popup">John Smith is shown in this illustration trading
with the native Americans who resided close to James Fort, probably
in 1607-1608, although his explorations took him much further afield,
across the northern edge of Chesapeake Bay and into Susquehannock
territory.</p>
</td>
</tr>
<tr>
<td width="100%" height="70">
</td>
</tr>
<tr>
<td width="100%">
<p class="popup">Original text copyright © P L Kessler and the
History Files. Image copyright © respective copyright holders.
An original photo page for the History Files. Go
<a href="javascript:history.back()">back</a> or return
<a target="_top" href="../index.html">home</a>.</p>
</td>
</tr>
<tr>
<td width="100%" height="70">
</td>
</tr>
<tr>
<td width="100%" bgcolor="#141414">
<!-- Footer links -->
<p class="navftr" style="margin-bottom: 5px;">Copyright © 1999-2018 <a href='http://www.kessler-web.co.uk/' target='_blank'><span class='navftr'>Kessler Associates.</span></a> All rights reserved.</p>
</td>
</tr>
</table>
</div>
</body>
</html>关于html - 试图让页面布局与谷歌移动友好测试一起工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53977114/