iPhone / Android / iPad 互換のサイトを構築しようとしていますが、これらのデバイスを持っていません。Responsinatorを使用してみましたが、次のような iPhone のメディア クエリを取得していないことに気付きました。
/* iphone */
@media only screen and (max-device-width: 480px) {
#wrapper { background-color: red; }
}
#wrapper の背景は、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) {
}