iphone/android/ipad互換のサイトを構築しようとしていますが、これらの端末は所有していません。しかし上、#wrapperの背景がResponsinatorのiphoneビューアに赤を示していませんでしたオンライン対応ウェブテスター
/* iphone */
@media only screen and (max-device-width: 480px) {
#wrapper { background-color: red; }
}
：私のような、Responsinatorを使用してみましたが、それも私のiphoneのメディアクエリを拾っていなかったことに気づきましたそれは実際のiPhoneです。これらのデバイスをすべて所有しなくても開発できるよう、CSSのメディアクエリを受け取る良い無料のサイトやアプリはありますか？
あなたは私はあなたがmax-device-widthを使用していることを、彼らは「通常」のブラウザでピックアップしていない理由があると思いますありがとうございました。代わりにmax-widthを使用すると、「どこでも」（IEではなく）動作します。
私はモバイルを最初にコーディングすることをお勧めします。最大の解像度から開始し、後方に向かって作業するのではなく、解像度が上がるにつれてレイアウトを改善し、最小のものから始めてください。
/* Default */
/* Little larger screen */
@media only screen and (min-width: 480px) {
}
/* Pads and larger phones */
@media only screen and (min-width: 600px) {
}
/* Larger pads */
@media only screen and (min-width: 768px) {
}
/* Horizontal pads and laptops */
@media only screen and (min-width: 992px) {
}
/* Really large screens */
@media only screen and (min-width: 1382px) {
}
/* 2X size (iPhone 4 etc) */
@media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(-o-min-device-pixel-ratio: 3/2), only screen and
(min-device-pixel-ratio: 1.5) {
}
ありがとうございますmax-device-widthが原因でした –
はちょうどあなたのブラウザのウィンドウのサイズを変更
は個人的に私はこのコードを使うのか？テストするのが難しい唯一のメディアクエリは、網膜ディスプレイを対象とするもの、またはピクセル比が1より大きいもの（ 'min-device-pixel-ratio'）です。ああ、あなたは 'max-device-width'の代わりに' max-width'を使いたいかもしれません。 – powerbuoy[Ripple]（http://ripple.tinyhippos.com/）が面白そうです。私はそれをまだあまり使用していませんが、いくつかのエミュレーションはAndroidのエミュレータ（これはひどい）と比べてまともです。 –