web-dev-qa-db-ja.com

レスポンシブデザイン-メディアクエリがiPhoneで機能しない?

ウェブサイトのモバイル対応バージョンを作成して、ウェブサイトをより小さな画面サイズに対応させ、それに応じてスケーリングしようとしています。

デスクトップ上でサイズ変更するときにブラウザーで正しく動作するメディアクエリをいくつか作成しました。

私のiPhoneでは、safariはWebサイト全体を縮小するだけですが、フルサイズのサイトのアスペクト比を維持します。メディアクエリを監視するにはどうすればよいですか?私は何かを見逃しましたか?

ここに私が正しく動作するようにしようとしているサンドボックスへのリンクがあります-任意の助けや提案を歓迎します:

http://www.preview.brencecoghill.com/

31
Gearu

あなたのHTMLにビューポートのメタがありますか?

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

詳細はこちら: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

75
coopersita

Chromeで;の代わりに警告が表示されると思います。これは正常に機能します。

<meta name="viewport" content="width=device-width, initial-scale=1">
14
Must Impress