web-dev-qa-db-ja.com

AndroidブラウザはレスポンシブWebデザインを無視します

「レスポンシブWebデザイン」を使用して自分のWebサイトを変換し始めました。 Firefox用「Web開発」プラグイン（ http://chrispederick.com/work/web-developer/ ）をインストールして、機能しているかどうかを確認しました。すべてが正常に見えました。

Android=電話でこれを試しました。縦向きモードでは正しく機能しませんでした...電話での@ media-selectorsの誤った処理まで問題を追跡しました：

このページ（ https://worldtalk.de/m/test.php ）は、パラメーターとして使用するブラウザーの高さ/幅とデバイスの高さ/幅+方向を出力するCSSを生成します。

次の結果が得られました。

  • 縦長、800x1200
  • 横長、800x400

方向は正しく、幅/高さおよびデバイスの幅/高さは両方の方向で同じでした。ただし、デバイス（HTC Desire Z）は、縦向きモードで誤った画面解像度（800x1200）を使用します。ユーザーエージェントなどのデバイスデータベースを使用しないようにしたいと思います。

追加情報：

  • ブラウザのバージョン：WebKit/533.1
  • Android 2.3.3/Sense 2.1
  • HTC Desire Z（T-Mobileファームウェア）
  • JavaScriptが同じ画面解像度を報告する

質問：

  • これは私の電話モデルだけですか、Androidブラウザの一般的な動作ですか？
  • これを修正するには？
androidcssresponsive-design
24
SDwarfs

そのトピックについてさらに調査した後、私は次の解決策を見つけました。スケーリングを無効にするようブラウザに指示するには、次の<meta>- Tagsを挿入する必要があります。その後、CSS @メディアセレクターは期待どおりに機能します。

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">

参照： モバイルWebページでズームを「無効」にするにはどうすればよいですか？ そして： http://garrows.com/?p=337 （編集： http://garrows.com/blog/disable-mobile-browser-zoom-function

よろしく、

ステファン

-編集-

上記のソリューションを適用する場合：一部のデバイスでは、「scale = 1.0」を使用したときに報告されるデバイス解像度が物理的な画面解像度より低く、画像がぼやけるなどの影響が出る可能性があります。これは、画面のdpiが高いために発生します。ただし、JavaScriptで報告される画面サイズは正しいです。高解像度の小さな画面の場合、正しい「物理ピクセル」解像度は次のものを使用して実現できます。

<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=0.666667, maximum-scale=0.666667, user-scalable=0">
<meta name="viewport" content="width=device-width">

ただし、これにより、dpi値が低い画面で問題が発生します。 JavaScriptによって報告された画面解像度を使用する方が安全と思われます。

-編集-

Chrome「ビューポートの引数値「device-width;」キーに関する「width」が認識されないというコンソールエラーが認識されません。コンテンツは無視されます。」を回避するには、セミコロンの代わりにカンマを使用してください。

http://royaltutorials.com/viewport-argument-value-device-width-for-key-width-not-recognized-content-ignored/

44
SDwarfs