24

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

今、私は自分のアンドロイド携帯でこれを試しました。ポートレートモードでは正しく動作しませんでした...電話での@media-selectorsの誤った処理に問題を突き止めました:

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

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

  • 縦、800x1200
  • 横向き、800x400

向きは正しく、幅/高さとデバイスの幅/高さは両方の向きで同じでした。しかし、デバイス (HTC Desire Z) は、ポートレート モードで間違った画面解像度 (800x1200) を使用しているだけです。ユーザー エージェントなどを含むデバイス データベースを使用することは避けたいと思います。

追加情報：

  • ブラウザのバージョン: WebKit/533.1
  • アンドロイド 2.3.3 / センス 2.1
  • HTC Desire Z (T-Mobile ファームウェア)
  • JavaScript が同一の画面解像度を報告する

質問:

  • これは私の電話モデルだけですか、それとも Android ブラウザの一般的な動作ですか?
  • これを修正する方法は？
4

1 に答える 1

44

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

<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 によって報告された画面解像度を使用する方が安全と思われます。

- 編集 -

'Viewport argument value “device-width;” に関する Chrome コンソール エラーを回避するには、セミコロンの代わりにコンマを使用します。キーの「幅」が認識されません。コンテンツは無視されました。

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

于 2012-08-19T11:56:24.443 に答える