如何调整Jquery Mobile中的所有元素的大小以适合iframe

How to resize all elements in Jquery Mobile for fitting inside an iframe?

本文关键字：元素 iframe 调整 Jquery Mobile 何调整      更新时间：2023-09-26

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

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

问题是我们网站的预览区域很小(height="330" width="220"(，一切都显得局促(文本、按钮等具有正常大小，但与 iframe 尺寸相比看起来很大(。

我试图在移动应用程序的主体中应用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 网络应用程序变小或"缩小"，但找不到好的解决方案。

经过一些顽固的研究，我找到了一种优雅的方法来缩小iframe内的Web应用程序。通过使用 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。右？

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

相关文章：