2014年04月05日

スマートフォン、タブレット、パソコンでスタイルシートを変える方法

スマートフォンとタブレットとパソコンでスタイルシートを変えて表示する方法はないか?
調べてみました。

下記でうまくいきました。

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

<link rel="stylesheet" href="phone.css" type="text/css" media="screen and (min-width: 0px) and (max-width: 480px)">
<link rel="stylesheet" href="tab.css" type="text/css" media="screen and (min-width: 481px) and (max-width: 800px)">
<link rel="stylesheet" href="pc.css" type="text/css" media="screen and (min-width: 801px)">

phone.cssにスマートフォン用のスタイルシート、
tab.cssにタブレット用のスタイルシート、
pc.cssにパソコン用のスタイルシートを記載しています。

画面サイズごとにスタイルシートを指定すれば、良いかなと思って試しましたが、
スマートフォン、タブレットが勝手に縮小表示する場合がありましたので、
最初のmetaのviewportで、最初は縮小表示しないように指定します。

これで、スマートフォン、タブレットもきれいに表示できるようになりました。

posted by hiro at 09:25| Comment(0) | TrackBack(0) | 日記 | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/393816316
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。