メディアクエリーからVIEWPORT

参考にさせていただきました。

●メディアクエリ(Media Queries)の記述方法

基本的にはブラウザ用のCSSを設定するmedia=”screen”にウインドウの横幅の最大・最小サイズを追加して、
media=”screen and (max-width:○○○px)”、media=”screen and (min-width:○○○px)”というような書き方をします。

それぞれ通常のCSSの読み込みと同様に内のlink要素、CSSの@import、CSSソース内に書くことができます。

* 内のlink要素のCSSに記述する場合

ウインドウサイズが1024px以下の場合にtablet.cssを読み込む

*CSSの@importに記述する場合

@importでウインドウサイズが1024px以下の場合にtablet.cssを読み込む
@import url(“tablet.css”) screen and (max-width: 1024px)

*CSSソース内に記述する場合

CSSのソース内でウインドウサイズが1024px以下の場合にタブレット用のスタイル記述を読み込む
@media screen and (max-width: 1024px){
/* タブレット用のスタイル記述 */
}

●メディアクエリ(Media Queries)を使用するためのViewport指定

スマートフォンのブラウザにはViewportという機能があります。

例えばiPhoneでPC用のサイトもスマートフォン用に最適化されたサイトも、どちらも同じブラウザで見ることができるのは、このViewport機能によって、デフォルトのウインドウサイズを980pxに設定されているからです。

指定をしていないPCサイトの場合は横幅 320pxのiPhoneのウインドウサイズでも980pxのサイズで表示されます。

これにViewport指定を加えることでコンテンツの横幅に合わせた表示をさせることができます。

メディアクエリを使用してレスポンシブWebデザインを制作する際には、
デバイスのウインドウサイズの横幅に合わせてCSSを切り替える必要があるため、
このViewportをデバイスの横幅であるdevice-widthに指定しておきます。

また、デバイスのウインドウサイズに最適化した表示をするため、ユーザーが表示の拡大・縮小をする必要がないため、user-scalable=noにし、倍率の最大値はデフォルトの1.6ではなくmaximum-scale=1に設定しておきます。


メディアクエリ(Media Queries)を使用するためのViewport指定

iphone、Xperia、GALAXY等、スマートフォンの主要機種それぞれを考慮したviewportの指定方法です。
640px960pxを基準とし、画面サイズ320pxに合わせるように指定するのがよいかと思います。

記述はこんな感じです。

iPhoneで検証していたのですが、user-scalable=yes が うまく機能してるのかな・・・・・・・・・・・
Posted in: ,