拉伸/调整HTML模板和将子级添加到窗口 [英] Stretch/Fit HTML Template and Children to Window

问题描述

我的应用程序生成HTML电子邮件模板.它们的宽度通常在600像素到650像素之间，但有时它们会达到900像素.模板嵌套得很深(很多table元素用于电子邮件客户端)，可悲的是所有宽度/高度都是以px而不是相对尺寸为硬编码的.到目前为止，这还可以，因为我的用户可以在浏览器中查看它们.但是现在我正在构建一个移动应用.

My application generates HTML email templates. They are between 600px and 650px wide usually, but sometimes they go up to 900px. The templates are nested pretty deep (lots of table elements for email clients), and sadly all the widths/heights are hard-coded in px, not relative dimensions. This has been ok until now, because my users view them in a browser. But now I am building a mobile app.

我正在尝试在各种移动客户端(iPhone，Android，iPad等)的Web视图中显示这些模板.有没有办法缩放"或适合这些模板，以便它们拉伸以填满窗口的整个宽度?

I am trying to display these templates in a webview inside various mobile clients (iPhone, Android, iPad, etc). Is there a way to 'scale' or fit these templates so they stretch to fill up the entire width of the window?

我尝试调整meta标签；

I tried tweaking the meta tag;

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

不幸的是，我事先不知道模板的宽度，因此我必须将meta标签设置得太宽或太小，然后模板要么具有白色边框，要么最终与窗口重叠.我还能尝试什么?

Unfortunately I don't know the width of the template beforehand so I have to either set the meta tag too wide or too small, and then templates either have white borders or end up overlapping the window. What else can I try?

推荐答案

我最终使用CSS3

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

在动态计算缩放比例以考虑5px边距后，

.原来

after dynamically calculating the scale ratio to take into account the 5px margin. Turns out

minimum-scale=0.1

对于较旧的Android手机来说，正确显示尺寸调整后的视图是必要的.

was necessary for an older Android phone to display the re-sized view correctly.

这篇关于拉伸/调整HTML模板和将子级添加到窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！