アンドロイドの自動調整モードでウェブページのCSSの幅に問題が発生する

Question

アンドロイドブラウザの自動サイズ変更機能に問題があります。私のサイトの幅は、デバイスがポートレートモードになっているときに少しばかげています。

私は何をしたいの

• は、デスクトップおよびモバイルユーザーの両方のためのサイトの同じバージョンを持っています。
• ユーザーが希望どおりにズームイン/ズームアウトできるようにします。私は現在、

  <meta name="viewport" content="width=1100"> 
  

  私の頭の中で次のよういる

私は私の問題を説明し、次のブログ記事を見つけました。

これは間違いなく、オートフィットレイアウト （AndroidのWebKitのソースコード内の「kLayoutFitColumnToScreen」）によって引き起こされます。ちょうど 自動装着を無効にしてテストを試してください。すべては （少なくとも私のAndroidデバイスでは）正しく表示されます。

Androidのオートフィットモードでは、特定の要素の幅がの位置合わせや他の要素の配置に影響を与えずに縮小されているようです。その幅の100％に及ぶwidth：1000pxと のテキストを含むブロックがある場合、コンテナは1000px のままですが、その内部のテキストは画面の幅で折り返されます。

http://www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html

に蹴りからこの自動調整モードを停止する方法はありますか？私はズームを無効にしたくありません。

更新：誰もが1を知っている場合

私はまだ解決策を探しています。 （彼らはテーブルを使用しているが）

は持っているが

Spanned columns collapsing on Android web-browser (when using auto-fit pages)

http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars

Answer 1

を同じ問題を持つ人を見つけwidth:100%;

Answer 2

のように、私はほとんどを持って、代わりにPXの％でWidthを与えますpタグとliの問題は周囲のコンテナよりはるかに小さくなりますが、Android 4.xの場合のみです。 Android 2.3.xとAndroid 3.xでは、「自動フィットページ」に負の副作用はありません。

改善するように見えますが、これまでよりうまくいきました。迷惑です。

Answer 3

はい、Android 4.xが原因であるようです。それはデフォルトの動作ですので、本当に迷惑です！ それは私のすべてのウェブサイトを完全に破壊します...

現時点では解決策が見つかりませんでした。 をダブルタップすると、画面の幅をテキストに合わせるのが適切です。この機能はズームしていなくてもアクティブになっているようです。

Answer 4

ここに同じ問題があります。私の<p>タグ内のコンテンツは、左側に払われます。私が<p>タグに背景色を追加すると、問題が「修正」されることがわかりましたが、良い解決策は見つかりませんでした。背景色を追加するのが理想的ではないので、私はまだ実際の修正を見つけることを試みています。

Answer 5

私はこの問題を経験しており、私のために働く解決策を見つけました。

私は<div>の中にいくつかのネストされた<div>要素を持っています。 HTMLは非常に基本的です。私は<div>が私のメイン<div>の中にあるので、テキストをダブルタップしてズームインするかのようにそのテキストをラップすることがわかりました。この<div>にはテキストのみが含まれていました。この動作は縦向きの場合にのみ発生し、ダブルタップまたは向きを変更した後に修正されました。

この問題はAndroidのバグであるため、CSSやHTMLは実際には修正できません。しかし、次のCSSは問題を満足に解決しました。 「ページの自動調整」をオフにする必要はありませんでした。

<div>にCSS background-imageを追加しました。私はちょうど透明な、1ピクセルのPNGを背景として使用しました。

div { background-image: url(../img/blank.png); }

Answer 6

私は単純に繰り返し背景として透明PNG画像を追加します。これはH1、H2、H3 ...タグでも同じ狭列問題に悩まされているように見えます。透明なPNGを使用することで、背景色を割り当てたり、要素の背後にあるものを表示したりすることができます。これは完璧ではありませんが、ブラウザー固有のハッキングに依存せず、他のすべてのモバイルブラウザーでうまく動作しているように見えます。

でも、私はSPANタグでも同じような動作をしていますが、上記のことはこの要素ではうまくいかないようです...変です！

Answer 7

私は、Delbertのソリューションが私のために働く唯一のものであることを確認したかっただけです。これがなぜ機能するかは完全には明らかではありませんが、機能します。私はこの問題についてかなり徹底的な調査をしてきました。そして、Tomの元の投稿からのリンクにはそこにあるすべてのものが含まれているようです。何が価値があるために

、私はここで提案されたソリューションの一部を使用して<div>タグの連鎖の中に深くネストされたいくつかの<p>タグの幅を修正するにいくつかのかなり積極的な試みを試してみました：

* { background-color: transparent; }は私のために動作しませんでした。 しかし、* { background-image: url("/image/pixel.png"); DIDは私のために働きます（pixel.pngは1x1透明PNGです）。私は最終的に私のネストされた<p>タグにのみ適用するためにこれをリラックスし、私の段落が最終的に意図された正しい幅に及んでいることがわかりました。

「ウェブページの自動設定」設定の結果であることも確認しました。私はAndroidを所有していませんが、エミュレータを使用してこれらの問題を経験しました。

もう一度Delbertさんに感謝します。

Answer 8

*{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)} 

Answer 9

これはAndroidでのプログラミング上の問題のようです。しかし、あなたのモバイルブラウザでは、設定=>詳細のチェックを外してください。ページを自動調整してください。これは解決できます。しかし、私たちはユーザーが守ることを望まないかもしれません。透明な背景イメージを配置するという単純なハックは当面は一時的な解決策として除外すべきではありません。フレームワークとしてDrupalを使用し、私のレスポンシブなテーマとしてOmegaを使用し、レイアウト領域と外部DIVが{display：block width：100％}に設定されていることがわかったので、これは数分間苦労しました。しかし、透明な画像はうまく機能しました。

Answer 10

IE8での再描画時間は、1x1透明ピクセルメソッドをまともなサイズのキャンバス上でそのターゲットで使用できなくなりました。オートフィット、またはアンドロイドのブラウザで検出することはできませんCSS（Android上でクロムはとにかく細かいようです）ので

は、私の回避策は（IE8がデスクトップになりやすいので）

1. ターゲットより小さなデバイスにした、と
2. は関連する 'p'タグのみをターゲットにしています（autofitはいくつかの 'p'タグを対象にしています）ので、必要に応じてこの修正を適用すると、再描画のパフォーマンスへの影響はできるだけ低く抑えられます。

（上記Demeticの回答に基づいて）私の回避策：

/* work around mobile device auto-fitting */ 
@media only screen and (max-device-width: 800px) { 
    #content p { 
     background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); 
     background-repeat:repeat; 
    } 
} 

私のウェブサイト上で「#contentは「P」タグが自動装着されていることを存在する場所、自然にあなたが必要と思いですこれを変更する。 'body'は機能しますが、具体的にするほど、再描画時間に対する影響は小さくなります。

自動調整が景観をターゲットにしていないようですので、それは肖像画のみの検出モードに追加する価値があるかもしれない - しかし私は、これは常に真であることを確認するのに十分なデバイス上でそれをテストしていません。

Answer 11

私は私の電子メールのコンテンツの生活TDに分幅と幅を設定し、現在のバージョンは、自動調整モードを使用してAndroidのGmailアプリで正常に動作しています。

<!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Gmail Issue</title> 
    </head> 
    <body> 
    <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
     <tr> 
     <td width="50%" valign="top"></td> 
     <td width="1100" valign="top" style="min-width:1100px;"></td> 
     <td width="50%" valign="top"></td> 
     </tr> 
    </table> 
    </body> 
</html> 

Answer 12

確かに1つのことは、自動フィッティングの「機能」が開発者にとって灰色の髪をたくさん引き起こしていることです。

私のメールの一番上に1ピクセルの高さと650ピクセルの幅（私の電子メールの幅）の透明なイメージを挿入することで問題を解決しました。

自動調整が有効になっていても、私の電子メールはレンダリングされるようになりました。

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center"> 
    <tr> 
    <td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px"> 

     <!-- HERE'S THE MAGIC -->  
     <table width="650" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td height="1"> 
      <img src="spacer.png" width="650" height="1" style="width:650px; height:1px;" /> 
      </td> 
     </tr> 
     </table> 
     <!-- END THE MAGIC --> 

     <!-- Start Wrapper--> 
     <table width="650" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td > 
      REST OF EMAIL HERE 
      </td> 
     </tr> 
     </table> 
     <!-- End Wrapper--> 
    </td> 
    </td> 
</table> 

Answer 13

CSSに背景画像を追加すると、自動調整が無効になります。

他のポスターは、単一のピクセル透明な背景を追加することを示唆しているが、あなたは実際に自分のCSSスタイルシートの先頭に空の背景画像を追加し、追加のHTTPリクエストをスキップして再描画することができます。

div, p { 
background-image: url(); 
} 

私はエミュレータと私のGalaxy SIIでテストしましたが、実際のURLを追加するのと同じように動作しているようです。