1

モバイル Web サイトを開発していますが、モバイル Safari で問題なく動作します。ただし、Android デバイスでは、一部のデバイスでのみ Web サイトが拡大されすぎます。友人の電話で試してみたところ、彼は Android 2.1 を実行している HTC Magic を持っていて、正常に表示されましたが、2.1 を使用するエミュレーターと Android 1.5 を実行している Motorola Backflip である私の電話ではズームインしすぎて表示されます。なぜ矛盾があるのか​​ について何か考えはありますか？

リンクは次のとおりです。http://itphosting1.com/dtang/jarritos/

これは私が使用しているメタ ビューポート タグです。

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

デバイス間の解像度と画面サイズの違いに関係しているのではないかと思います。それを解決する方法はよくわかりませんが...

4

2 に答える 2

1

のように変えてみてはどうでしょうか。

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />
于 2011-03-02T08:53:40.867 に答える
0

私は同様の問題を抱えていましたが、解決策は私が取り組んでいるサイトの設定に大きく依存していました. Android 2.2 以下では、サイトがデバイスに合わせて正しくスケーリングされず、メディア クエリがズームに応答しました。

<meta name="viewport" content="width=device-width, initial-scale=1">解決策として、ビューポートのメタ タグに関する限り、使用するだけで十分でした。次に考慮しなければならなかったのは、ページのメイン コンテナの CSS で明示的な幅が設定されていることです。この幅は他のブラウザーのビューポートの幅に対応しますが、この場合はそうではありません。最初のメディア クエリが開始されたときにメイン コンテナーが 100% の幅に設定されることを確認する限り、明示的に宣言された幅を CSS に残すことができます。したがって、基本的に、LESS 構文を使用します。

@containerWidth: 1080px;

#page {
    width: @containerWidth;
}

@media screen and (max-width: @containerWidth) {
    #page {
        width: 100%;
    }
}
于 2013-11-26T17:37:32.297 に答える