Android と iPhone の両方で動作するように Web サイトを調整しようとしています。幅を縮小するためにほとんどすべてを設定しました。
自分の Web ブラウザ ウィンドウのサイズを変更してテストすると、期待どおりに動作します。iPhoneで見ると問題なく動きます。しかし、Android(またはAndroidエミュレーター)で表示すると、他のものとは異なって見えます。スクリーンショットを2枚添付します。
どこから始めたらいいのかわからない... よろしくお願いします。
本文のフォントをリセットしてみてください。本文 { フォントサイズ: 100%; また、ビューポートを使用してみてくださいhttp://developer.android.com/guide/webapps/targeting.htmlを参照してください
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" />