初めてスタックオーバーフローに投稿します。私は実際に問題を修正しましたが、その理由がわかりません。
そこで、別の Web サイトから次のメディア クエリを「借用」したところ、完全に機能しました。
==== Tablet Size ====
@media (min-device-width:1024px) and (max-width:989px),
screen and (max-device-width:480px), screen
and (min-device-width : 768px) and (max-device-width : 1024px),
(min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait){
/* Content */
}
==== Phone Size ====
@media (min-device-width:1024px) and (max-width:509px), (max-device-width:480px) and
(orientation:portrait), screen
and (min-device-width : 320px) and (max-device-width : 480px){
/* Content */
}
次のメディア クエリは、コードを単純化し、重複している可能性のあるものを取り除くための私の試みです。うまくいきませんでした。問題はデバイスにあります。（電話でのみ確認しました）次のクエリは、ブラウザのサイズ変更には完全に問題なく機能しますが、デバイスではぎこちなくなります。ボディ/ラッパーの幅を 100% に設定しましたが、電話ではデバイスの幅の約 20% のサイズが表示されます。
==== Tablet =====
@media (min-device-width:1024px) and (max-width:989px),
screen and (min-device-width : 768px) and (max-device-width : 1024px),
(min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait){
/* Content */
}
Phone:
@media (min-device-width:1024px) and (max-width:509px), screen
and (min-device-width : 320px) and (max-device-width : 480px){
/* Content */
}
どんな手掛かり？おそらく単純なものです。また、メディア クエリのヒントや提案も受け付けます。会社の Web サイトをすべてモバイル対応に移行し、すべてのタブレットとすべての携帯電話を対象とするクエリを設定しようとしています。
助けてくれてありがとう！