Question

我正在与 jQuery Mobile 一起撰写一个应用程序, 它将在浏览器中作为本地移动应用程序的 preview 。

我打算把网络应用程序放在一个像小智能手机模拟一样的框架里。文本的清晰度是 not 重要, 只有颜色、图像和总体外观和感觉。

问题在于我们网站上的预览区域小( hile="330"宽度="220" ), 并且所有内容似乎都太挤(文字、按钮等有正常大小,但与一框架尺寸相比显得大)。

我试图在移动应用程序的正文中应用 font- size: 50%; 或 width: 220px; 高度: 330px; 。另外,元视图没有帮助。

我的框架是这样的:

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

我需要让 JQM 网络应用程序更小, 或“分离出来”, 但找不到一个好的解决方案。

Answer 1

经过一些固执的研究后,我找到了一种优雅的方法将网络应用程序缩小到 Irame 内部。通过使用 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。对吗?

Answer 2

您是否看过身体 { 宽度: 220px; 高度: 330px;} 和元视图标签? 您实际上应该把它做成 320x480, 因为大多数屏幕都有这个分辨率。

友情链接