てるてるブログ

てるてるぼうずの日常やらお勉強やら

スマホ用サイトのCSS切り替え

Posted on | 1月 7, 2014 | 1 Comment&trackback

スマホ用サイトというかサイトのスマホ対応とかもやんなきゃいけない事が多くなり始めたので、pc用との切り替え方法に関しての覚え書き。
なんかそう言うのレスポンシブWebデザインって言うらしいですね。

java scriptやphpを使った切り替え方法もありますが、今回はCSSを切り替える事で同じページの見え方をpc用とスマホ用で変える方法。
切り替え用のjsライブラリなどもあるようですが、とりあえずはhtmlのheadタグ内にviewport設定を記述する事で対応。
サイトの表示画面のサイズによって読み込むCSSを変更。
PC用とスマホ用と二種類のCSSを用意する必要があるけど、HTMLは一種類でいけるので更新の手間など考えるとこっちの方が楽そうではある。

viewportの設定

ユーザーによる表示の拡大・縮小を禁止する場合

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

ユーザーによる表示の拡大・縮小を許可する場合

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

スマホ用とPC用のCSSの読み込み

<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" />
<link media="only screen and (min-width: 0px) and (max-width: 568px)" href="css/smart.css" type="text/css" rel="stylesheet" />

上記だと「ブラウザの表示領域の横幅が568px(iPhone5の画面サイズ)以下の時はsmart.cssを読み込んで、それ以外はstyles.cssを読み込め!」ってな事になります。
スマホ用CSSの↓でそれぞれのデバイスの幅を指定。
max-device-width:◯◯px

とりあえず代表的なデバイスの画面サイズ↓。

iPhone3G / 3GS  320×480
iPhone4 / iPhone4S  960×640(Retina)
iPhone5  1136×640(Retina)
iPad  1024×768
iPad Retina  2048×1536(Retina)

Retinaディスプレイだと半分になるって解釈でいいのかな…?

トラックバックURL:

Comments

One Response to “スマホ用サイトのCSS切り替え”

トラックバック

Leave a Reply





*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

Admin