1

Android と iPhone の両方で動作するように Web サイトを調整しようとしています。幅を縮小するためにほとんどすべてを設定しました。

自分の Web ブラウザ ウィンドウのサイズを変更してテストすると、期待どおりに動作します。iPhoneで見ると問題なく動きます。しかし、Android(またはAndroidエミュレーター)で表示すると、他のものとは異なって見えます。スクリーンショットを2枚添付します。

どこから始めたらいいのかわからない... よろしくお願いします。

Android エミュレーター

iPhone

4

2 に答える 2

1

本文のフォントをリセットしてみてください。本文 { フォントサイズ: 100%; また、ビューポートを使用してみてくださいhttp://developer.android.com/guide/webapps/targeting.htmlを参照してください

于 2012-08-26T13:03:10.337 に答える
1

Android エミュレーターの外観が異なるのには、かなり単純な理由があります。それは、エミュレーターの画面の幅を設定したためです。CSS ファイルで、ページmin-widthを 600 ピクセルに設定しましたが、これは Android エミュレーターの幅よりも大きくなっています。これにより、ヘッダーが切り捨てられます。

私は Web デザイナーではないので、このような小さな幅のデザインをどのように扱うかはあなた次第です。ただし、CSS 内で以下を使用して、このようなエッジ ケースをターゲットにすることができます。

@media all and (max-width: 600px) {
    // Some CSS code
}

または、別のスタイルシートを使用して:

<link rel="stylesheet" media="all and (max-width: 600px)" href="android-stylesheet.css" />
于 2012-08-26T13:04:07.073 に答える