0

ブラウザー内でネイティブ モバイル アプリのプレビューとして機能する jQuery Mobile を使用してアプリを作成しています。

小さなスマートフォン シミュレーションのような iframe に webapp を配置するつもりです。テキストの読みやすさは重要ではなく、色、画像、および全体的なルック アンド フィールのみが重要です。

問題は、私たちの Web サイトのプレビュー エリアが小さく ( 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 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

体を見たことがありますか{幅：220px; 高さ：330px; }とメタビューポートタグ？ほとんどの画面はその解像度を持っているので、実際には320x480にする必要があります。

于 2012-05-21T11:02:15.747 に答える