4

まず、これは私が他の質問で見たズームの問題ではありません。また、iOS6を実行しているiPhone4を使用してこれをテストしています。モバイルプロジェクトで作業しているときに、viewportタグとモバイルサファリに問題があることを発見しました。私はすべてを可能な限り基本的なコードにまとめました。パラメータを設定しました：

  • width =device-width
  • height =device-height
  • 初期スケール=1.0
  • 最大スケール=1.0
  • user-scalable = no

画面を回転させるまで、すべて正常に機能します。サイズは変更されず、ギャップを埋めるために右側に黒いバーが表示されます（スクリーンショットを参照）。完全に削除すればheight=device-height、問題は解決します。ただし、このパラメーターを使用する必要があります。そうでなければ、私は別の質問をしなければなりません。

ポートレートモードに戻った後、その黒いバーは残り、左右にスクロールできます。これは非常に奇妙な問題です。削除width=device-widthすると、予期しないことが起こります。試してみたい場合は、ここにコードがあります：http: //toastd.net/viewport.html

ここにいくつかのスクリーンショットがあります：

ここでは、ポートレートモードで正常に動作しています。 働く

横向きモードに回転した場合 ランドスケープモードで動作しない

次に、回転してポートレートモードに戻ります 縦向きに回転して戻す

4

2 に答える 2

0

メタタグはビューポートのルールを定義するのに役立ちますが、向きの変更に対処するために視覚的なスタイルを適用する必要があります。これらのCSS値を試してみてください。

body { width: 100%; height: 100%; }

プロジェクトの継続に役立つ優れたリソースが必要な場合は、PhoneGapのGitHubにフォークできるスターターアプリがあります。
PhoneGapスタート

于 2013-02-19T15:25:58.947 に答える
0

これはSafariのバグだと思いますが、回避する方法を見つけました。それは特定の要素とそのスタイルに関係しています。削除のプロセスによって、私はそれをいくつかの「不快な」HTML要素に絞り込みました。width: 100%;一部の要素やCSSスタイル、およびその他の静的な幅から削除width: 120px;すると、問題が軽減され始めます。右側のマージンが小さくなったので「減り始め」と言いますが、完全には消えませんでした。次に、マージンやパディングなどの他のCSS属性で遊び始めました。いくつかの要素からいくつかの左右のパディングを取り除いた後、問題はようやく解消されました。しかし、これらのスタイルには理由があったため、これは実際には受け入れられませんでした。

解決策は、すべてをコンテナ要素でラップし、適切なサイズにしoverflow: hidden;、CSSで設定することでした。orタグoverflow: hidden;への設定も機能しますが、MobileSafariでの垂直スクロールではファンキーなことが起こりました。私の場合、すでにそのようなコンテナ要素があったので、私がしなければならなかったのはそれにプロパティを追加することだけでした。bodyhtmloverflow

私が言ったように、これはSafariのバグだと思います。横向きから縦向きに回転するときは、縦向きモードに合うようにすべてのサイズを元に戻す必要があります。視覚的には、すべてが適切にサイズ変更されたように見えます。ただし、Safariは何かが適切にサイズ変更されていないと考えていたため、実際よりも広いページが表示されていました。これは、AndroidデバイスのChromeで問題なく機能します。また、さまざまな背景色と境界線を追加して、ページがデバイス画面の幅を超えて伸びる原因となっている可能性のある要素を強調しました。視覚的には、明らかな原因はありませんでした。

あなたがそれがwidth: 100%プラスのpadding問題かもしれないと思っているなら、私は同じ考えを持っていました。しかし、幅またはマージン/パディングのいずれかを削除するだけで問題は修正されたはずですが、修正されませんでした。画面の端を越えて座っている要素は1つもありませんでした。そこには空きスペースしかありませんでした。

于 2013-09-18T02:05:44.133 に答える