拉伸/适合HTML模板和儿童到窗口

时间:2013-03-31 14:08:58

标签: javascript html meta-tags viewport email-templates

我的应用生成HTML电子邮件模板。它们通常在600px到650px之间,但有时它们会达到900px。模板嵌套得非常深(电子邮件客户端的许多table元素),遗憾的是所有宽度/高度都是用px硬编码的,而不是相对尺寸。直到现在一直没问题,因为我的用户在浏览器中查看它们。但现在我正在构建一个移动应用程序。

我正在尝试在各种移动客户端(iPhone,Android,iPad等)内的webview中显示这些模板。有没有办法“缩放”或适合这些模板,以便它们伸展以填满窗口的整个宽度?

我尝试调整元标记;

<meta name="viewport" content="width=device-width, initial-scale=1.0>

不幸的是我事先并不知道模板的宽度,所以我必须将元标记设置得太宽或太小,然后模板要么有白色边框要么最后重叠窗口。我还能尝试什么?

1 个答案:

答案 0 :(得分:0)

我最终使用了CSS3的

transform: scale(ratio);
position: absolute;
top: 5px; left: 5px;

动态计算比例后,考虑到5px的保证金。结果

minimum-scale=0.1

是旧版Android手机正确显示重新调整大小视图所必需的。