web-dev-qa-db-ja.com

Androidブラウザがこの段落をブラウザの全幅にまたがらないのはなぜですか？

問題：

enter image description here

質問

段落は、ページの幅全体を埋めます

  • Firefox
  • Firefox Mobile（SGS2で4.0.3でテスト済み）
  • Chrome
  • Chrome Mobile Beta（SGS2で4.0.3でテスト済み）
  • インターネットエクスプローラ
  • Internet Explorer Mobile（Windows Phoneエミュレーターでテスト）
  • Opera Mobile（SGS2で4.0.3でテスト済み）
  • Androidネイティブブラウザ（SGS2およびAndroidエミュレータ）で4.0.3でテスト済み）

デフォルトのAndroidブラウザでも同じようにするにはどうすればよいですか？

私は試した：

この例は、私がはるかに大きなページで抱えている問題を示すために縮小されていることに注意してください。ですから、私は解決策ができるだけ混乱しないようにしたいと思います。たとえば、私のサイトのall段落をfloatに設定するのは悪い考えのようです。

width

widthCSSクラスのpプロパティの値を増やしても効果はありません。
相対値：100%および1000%は効果がありません。 100％未満の値は効果があります（段落が薄くなります）。
絶対値：1000pxは幅を拡大しませんが、低い値は幅を縮小します。

float

段落にfloat : right;を設定すると、必要に応じて表示されます。
enter image description here

CSSリセット

これらの CSSリセット スタイルを挿入すると、段落の幅は影響を受けません。

position

段落でpositionをabsoluteに設定すると、必要に応じて表示されます。しかし、それが一般的に有効にされていても安全かどうかはわかりません。

起源：

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Android Browser Issue</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      body {
        border : 3px dotted green;
        margin : 0;
        padding: 0;
      }
      p {
        border : 3px solid red;
        margin : 0;
        padding: 0; 
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </body>
</html>

ここでそれを見ることができます： http://jsfiddle.net/EYcWL/embedded/result/ または直接そこに行きます： enter image description here

androidhtmlcssandroid-4.0-ice-cream-sandwich
29
Der Hochstapler

これはバグではありません。これを解決するためにECMAScriptで修正する必要はありません。

あなたはあなたのコンテンツが存在するツリーについて考える必要があります。

window
 \- html
   \- body
     \- p
       \- content

したがって、コンテンツの幅は、p要素のCSS属性によって決定されます。したがって、テキストをブラウザのウィンドウと同じ幅にしたいので、幅を100％にしようと試みることができます。したがって：

p { width: 100%; display: block; margin: 0px; padding: 0px; }

ただし、これが思ったように機能していないことがわかります。ただし、これはバグではなく、単に標準の誤解です。要素にパーセント幅を設定することについて、標準が何を示しているかを見てみましょう。 ビジュアルフォーマットモデルの詳細のwidthプロパティ を参照してください。

<パーセンテージ>
パーセンテージ幅を指定します。パーセンテージは計算されます生成されたボックスを含むブロックの幅に関して。含まれているブロックの幅がこの要素の幅に依存している場合、結果のレイアウトはCSS2.1では定義されていません。

強調私の、このテキストはそれが含まれているブロックの幅に関して計算されると言います。ツリーを振り返ると、pはbodyに含まれています。それで、私たちの収容ブロックの幅は何ですか？

その幅はまだ定義されていないため、ブラウザによって決定された値を取ります。

ここでの解決策は、本体の幅も定義することです。これは、6文字を追加することを意味します。

html, body, p { width: 100%; display: block; margin: 0px; padding: 0px; }

つまり、htmlの幅はウィンドウの幅の100％、bodyの幅はhtmlの100％、pの幅は100％になります。あなたのbody。これですべての幅が正しくなるはずです。

肝心なのは、DOMツリーについて考え、CSS標準を確認することです...

9
Tamara Wijsman

私は実際に機能するこの問題の解決策を見つけました!!これは実際にはAndroidブラウザの「Auto-FitPages」の設定です。これをオフにすると、この問題は確実に解決されます。

マイク

12
mcottingham

この問題が発生した後、 メタビューポートとメディアクエリの組み合わせ が最も簡単な解決策を提供しました。 質問 で提供されるソースHTMLに<meta name="viewport" content="width=device-width" />を追加するだけで、Androidブラウザでの表示が修正されました（Android = 4.2仮想デバイス）。上記のリンクを引用します。

通常、レイアウトビューポートは、デスクトップサイトの表示に最適であるとベンダーが決定した幅を取ります。

メタビューポートをデバイス幅に設定することで、サイトの幅が表示されているデバイスに合わせて最適化されていることを確認できます。

6
Dan Cruz

これはCSSの問題ではありません。

body, p { width: 100%; }

動作しないようです。 このスクリーンショット を参照してください。

ただし、段落に背景を適用すると、完全に広がります。

これはハックのようですが、他の解決策を見つけることができません。

 background: url('');

一部のブラウザで画像xアイコンが表示されないかどうかはわかりませんが、
または、空のpngを使用することもできます。

6
Neo

これはバグです。目的の効果を得るには、高さ宣言を強制する必要があります。私はこれを作りました フィドル 。

したがって、jQueryまたは他のjsフレームワークで.height（）メソッドを使用して、<p>の実際の高さを計算し、インラインスタイルをその場で追加することをお勧めします。目立たないです。

お役に立てば幸いです。

3
bobighorus

Androidおよびデフォルトのナビゲーターの小さな画面の場合、段落はデバイス幅をp-> max-widthと見なします。

私の場合、ビューポートといくつかのJavaScriptで解決しました。

//NOTE: Take Android boolean var from user-agent in request
var screenWidth=window.screen.width;
if (screenWidth<600 && Android) {
    var node = document.createElement('meta');
    node.name="viewport";
    node.content="initial-scale=0.1, maximum-scale=3";
    $("head").append(node);
}

これは、dpiとデバイス幅の高さが異なるいくつかのメディアクエリを使用して、すべてのページで機能しています。

1
surfealokesea

私はこれがバグだとは思わない：my Android 4は、縦向きから横向きに移動するとpの幅を変更し、ダブルクリックしてズームすると、画面にぴったり収まる。

携帯電話のビューポートの幅は約1000px（1024の場合もあります）であることが多く、画面は小さいことに注意してください。 100％と言うと、ブラウザはビューポートの幅ではなく画面の幅を使用する場合があります。これにより、テキストをdblclickして、リフローせずに段落を画面に自動的に合わせることができます。おそらく、この動作はPタグに制限されており、これはpのセマンティクスと一致していると見なすことができます。

0
FxIII