html - ウェブサイトのバナーの背景色

Question

私はウェブサイトを作りました: www.co-ceramics.co.uk

とてもシンプルですが、それはクライアントが望んでいることです。ただし、これをiPhoneで見ると。バナーの青色の背景色が正しく表示されません (右端まで)。

iPhone の解像度に合わせて特定のスタイル シートを設定する必要があるのでしょうか。

それとも、これよりもはるかに単純なものがありますか?

ありがとう！イアン

Answer 1

モバイル/iPhoneかどうかを確認するコード（JSコード）は次のとおりです。

if (screen.width <= 699) {
  // Check if mobile
 }



if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    // Check if Iphone
}

ユーザーがモバイルを使用しているかどうかを確認できるようになったら、css コードにライト バージョンを作成するか、幅と高さをモバイルと同じに変更して、背景が機能するようにします。

もう 1 つの方法は、ピクセルの代わりにパーセントを使用することです (幅: 600px <- 少数の画面のみに一致、幅: 100% <- 画面全体のすべての画面に一致)。

私が助けてくれることを願っています

編集：

画面幅の部分を明確にするために、document.writeまたはを使用してスタイルシートを置き換え、innerHTML改善されたコードで新しい css ファイルを作成できます。

Answer 2

これを使用しているためです：

meta name="viewport" content="width=device-width, initial-scale=1.0"

幅は本来あるべきことを正確に行っており、画面サイズを取得して 100% を表示していますが、バナー内の要素が幅を超えているため、物事が押し出されています。