ぺんろぐ

Windows、Webデザイン、ネット、ゲームなど中心とした気まぐれ更新ブログ。

PCサイトとスマートフォン対応サイトによってCSS切り替え

headタグ内に以下のようなソース。


<meta name="viewport" content="width=device-width">
<link media="only screen and (max-device-width:480px)" href="m.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<link href="pc.css" rel="stylesheet" type="text/css" />
<![endif]-->


pc.cssはPC用、m.cssはモバイル用。
(cssのファイル名は任意の名前でおkです)
画面の解像度によって、使用するCSSを切り分けます。

青色はIE用。ieは「link media=」が対応しておらず
このソースがないと、IEはCSSを読み込みせず真っ白なページに。。

PC用は2カラムで、スマホ用は1カラムにしたい時に使えるかも。
(スマホ用のCSSは、メニュー用のサイドのDIVのdisplayをhiddenにする感じ)

スポンサードリンク

  1. 2011/08/23(火) 22:06:29|
  2. WEBデザイン
  3. | コメント:0

コメント

コメントの投稿

管理者にだけ表示を許可する

FC2Ad