0

http://www.transmog.netのiPhoneシミュレータを自分のサイトに埋め込もうとしています。これは、ユーザーがURLを入力するためのフォームで非常にうまく機能しています。このフォームは、モバイルブラウザーを介して渡され、ユーザーのサイトに表示されます。

ただし、組み込みシミュレーターは私たちの目的には大きすぎるため、小さくしたいと思います。私は現在、シミュレーターをiFrame内に配置し、CSSを使用してズーム/変換するか、同じことを行うことで、これを実現しようとしています。

ただし、50％にズームし、シミュレータのサイズを小さくすると、50％しか表示されず、残りは「トリミング」されます。

ここで検索しましたが、探している答えが見つからないようです。

どんな助けでも大歓迎です！

ありがとう

4

2 に答える 2

0

CSSはiframeをカスケードしません（ホストページと同じドメインにあり、プロパティを持っている場合を除く）— iframe内seamlessで必要なテクニックをインスタンス化して、そのコンテンツに影響を与える必要があります。残念ながら、これはトランスモグリファイアのカスタマイズ設定を使用しては不可能に見えます。

于 2013-02-21T13:54:54.680 に答える
0

いくつかのポインターを与え、各ポインターにコメントを追加します。

この問題を解決するためにどれだけ投資したいかによって、いくつかのオプションがあります。しかし、それはあなたのサイトの重要な提供物のように思われるので、少し時間をかける価値があると思います。

最初のオプション： iphoneフレームがどのように見えるかのsvgバージョンを作成します：

  • SVGが何であるかわからない場合は、基本的には、ズームインおよびズームアウトしても品質が低下しないベクターグラフィックです。この画面ではテキストと考えてください。テキストがピクセル化されていることはわかりません。ズームインしますか？）
  • divにsvgを含めて、それにcssスタイルを与えることができますposition: relative。
  • 上記のdiv内に、別のdivを配置し、cssスタイルを設定しposition:absoluteて、親divを基準にした左側と上部のx座標とy座標を指定します。
  • pxは使用せず、代わりにemsを使用してください。ズームイン/ズームアウトすると、ピクセルの予測が難しくなります（ズームインとズームアウトは、コンテンツをさまざまな画面解像度で表示するのとほとんど同じですが、それには入りません）

2番目のオプション：ビットマップを使用する

  • 上記のものと似ていますが、iPhoneのSVG描写を使用する代わりに、ビットマップを使用して、背景として設定し、上記とほぼ同じ手法を使用できます。
  • このソリューションの問題は、ユーザーがズームインおよびズームアウトすると、画質がいくらか低下することです（すでにあなたの画像で確認できます。500％ズームインすると、エッジがピクセル化されます（つまり、ラフに見えます）。端に））。繰り返しになりますが、これが私のサイトであれば、見栄えを良くするために一生懸命努力します。HTML5は、それを行うためのすべての力を提供します。

明確なオプション：iframeに近づかないでください..それははるかに難しいオプションであり、その利点はあなたの状況には当てはまりません。

于 2013-02-21T14:00:22.913 に答える