【发布时间】：2015-08-16 23:47:36
【问题描述】：
我正在为一个客户设置一个 html 模板，这样可以玩得开心，耶。
在桌面浏览器中可以正确预览响应，但是当发送到 iphone 时，td 不会随着应用的百分比缩放，只是默认为内容大小。我提供的示例适用于图像（尝试为模板设置导航），但也仅适用于文本。
目标是一个 600 像素居中的内容区域，电子邮件的背景为浅灰色。在 600 像素以下，导航单元格应响应缩放至视口的 25%，但对于文本内容，单元格会缩小为文本大小，而图像则扩展为图像大小。
任何人都知道在 iphone 上将表格单元格宽度设置为视口百分比的方法吗？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">
<style>
.wrapper {
width: 100%;
text-align: center;
background-color: #ebebeb;
}
.container {
width: 600px;
max-width: 600px;
margin: auto;
}
.header {
background-color: #ffffff;
width: 100%;
}
@media (max-width: 600px) {
html, body, .wrapper, .container, .header, .wrapper-td, .container-td {
width: 100% !important;
max-width: 100% !important;
}
}
</style>
</head>
<body>
<table class="wrapper">
<tr>
<td class="wrapper-td">
<table class="container">
<tr>
<td class="container-td">
<table class="header">
<tr>
<td style="width: 25%;">
<a href="#"><img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" /></a>
</td>
<td style="width: 25%;">
<a href="#"><img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" /></a>
</td>
<td style="width: 25%;">
<a href="#"><img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" /></a>
</td>
<td style="width: 25%;">
<a href="#"><img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
【问题讨论】：
-
不确定我是否理解这个问题。因此，您希望桌面上的 4 个框（25% 宽度）在一个 600 像素的灰色背景框架中，而在 iphone 上您希望它们 100% 在彼此下方？
-
实际上，在 600px 视口下，我正试图让 4 个 TD 响应缩放到 25%（我知道这不是最好的 UI，但这些是要求）
-
你试过我下面的答案了吗？我可以让它工作
标签： iphone responsive-design html-email