0

我正在使用 jQuery Mobile 编写一个应用程序，该应用程序将在浏览器中充当本机移动应用程序的预览。

我打算将 webapp 放在一个 iframe 中，就像一个小型智能手机模拟。文本的易读性并不重要，重要的是颜色、图像和整体外观。

问题是在我们的网站中，预览区域很小height="330" width="220"（

我试图申请font-size: 50%;或width: 220px; height: 330px;在移动应用程序的正文中，但没有运气。元视口也没有帮助。

我的 iframe 是这样的：

<iframe id="webapp" frameborder="0" height="330" width="220"
  src="http://jquerymobile.com/demos/1.1.0/">​

我需要使 JQM webapp 更小或“缩小”，但找不到好的解决方案。

4

2 回答 2

3

经过一些顽固的研究，我找到了一种在 iframe 中缩小 webapp 的优雅方法。通过使用 CSS3 2D 变换：

transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5); /* IE 9 */
-moz-transform:scale(0.5,0.5); /* Firefox */
-webkit-transform:scale(0.5,0.5); /* Safari and Chrome */
-o-transform:scale(0.5,0.5); /* Opera */

这种样式将使 iframe 缩小 50%。

缺点是只支持 IE9+，但这没关系，因为我们都讨厌 IE。对？

于 2012-05-24T08:12:11.130 回答
0

你看过body { width: 220px; 高度：330px；和元视口标签？您实际上应该将其设置为 320x480，因为大多数屏幕都具有该分辨率。

于 2012-05-21T11:02:15.747 回答