android -
背景色が適用されていない限り、スタイルが正しくありません

Question

私はモバイルサイトを開発しているので、CSSを使用して物事を可能な限り流動的にしています。

私は奇妙な困難を抱えています。divコンテナ内に、divの幅を満たすことになっているがあります。私は試しましたがwidth:auto、width:100%Androidブラウザでは何も機能しないようです。次に例を示します。

iOS（正解）：

正しい向き

Android（正しくない、完全には広まっていない、iOSバージョンよりも多くのテキストを追加したため、私が話していることを確認できます）：

ここに画像の説明を入力してください

それぞれのエミュレーターから取得した両方のスクリーンショット。

ただし、これは奇妙なことです...これらの背景色に適用されるクラスを指定すると、Androidブラウザーでは、親divの全幅を埋めることができます（iOSと同じように見えます）。ただし、本当に奇妙なのは、背景色を透明にすると（だまされたと思ったのですが）、例のように元に戻ることです。

だから、背景色が適用されている場合にのみ、CSSを適切に参照しています...私は愚かに何かを見落としていますか、それともこれはAndroidブラウザの問題ですか？それを修正する方法はありますか？

御時間ありがとうございます。

score 5 · Accepted Answer

最善の解決策ではないかもしれませんが、私はついに「見えない」透明なpngを作成し、それをの背景として設定しました。これで問題が修正されました。:)私はすべてのブラウザ、デスクトップ、モバイルでこれを試したので、Androidのブラウザで何らかのエラーが発生したと想定する必要があります。

score 2 · Accepted Answer

これは、Androidフォンの意図された動作です。ページをピンチズームしても横にスクロールする必要がないため、コピーテキストの読みやすさが向上します。

それはおそらくブラウザの設定であなた自身の電話で管理することができます、しかしそれはあなたが望む解決策ではありません。

必要な要素に背景画像を適用する回避策によって「修正」できます。

これは、base64でエンコードされたデータURLを使用して実行できます。

background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

score 1 · Accepted Answer

モバイルブラウザの設定で、「AutoFitPages」と呼ばれるものを探して無効にします。この設定（Androidの場合）はデフォルトでオンになっています。オフにすると、テキストが適切に流れます。

score 0 · Accepted Answer

divまたはこれより上の要素

問題になる可能性があります。

p要素に固定幅を与えると、うまく機能しますか？

4 に答える 4