ホームページ制作会社、サイト制作、その他各種システムの構築、CGI、PHP等のWEBアプリ開発

ホームページ制作・システム構築・DB設計ホームページ制作・システム構築・DB設計
ホームページ制作とWEBシステムの構築、カスタマイズから運用サポートまで。
スペーサー

PC用とスマホ用の表示切り替えをCSSだけで行う方法(その1)


に関連する記事です。

20110930.gifPCサイトはもちろんスマホで閲覧することは可能だけれど、やはりスマホにはスマホ用のサイトを表示してあげることがユーザビリティ的にも必須であると考えている。
お使いいただいている方ならご存知であると思うが、スマホでPCサイトを閲覧するには文字が非常に小さく、拡大表示しないと閲覧不能なサイトも多い。

現在iphoneは「4」の時点だけれど、フラッシュは読めないし、何気に正確に意思伝達がなされないサイトが多々ある。

また、リンクが小さくなってしまいがちで、指でクリックするにはいささか小さすぎるように思える。
スマホ用のサイトといえばやはり、リンクが大きく、クリックしやすく、表示文字もおおきく、画面サイズに忠実に表示されてるサイトを使いやすく感じるのである。

基本的にスマホ用のサイトというものはPCサイトから余分なものを削って、必要最低限の情報だけを表示することがスマホサイト構築の鉄則であるように思っている。
上記のような方法論に基づくと、PCサイトとスマホサイトをCSSだけで表示方法を切り分ける方法が有効であるという。

また、マッキントッシュ標準のブラウザであるsafariやgoogleのchromeなどはApple
WebKitを標準装備しているため、角丸やグラデーションなどがCSSだけで簡単に再現できる。

以下、弊社が実施した「PC用とスマホ用の表示切り替えをCSSだけで行う方法」である。

まずはHTMLヘッター部分にviewportを設定する。
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link media="only screen and (max-device-width:480px)"
href="smart.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)" href="design.css"
type="text/css" rel="stylesheet" />
<!--[if IE]>
<link href="design.css" type="text/css" rel="stylesheet" />
<![endif]-->

media、screenの480px以下をスマートフォンと判断し、smart.cssを読み込み
481px以上であればPCと判断しdesign.cssを読み込む。
UAがIEの時だけはmedia、screenが効かないので、そのままdesign.cssを読み込む。
以降、PC用とスマホ用の表示切り替えをCSSだけで行う方法(その2)へ




PC用とスマホ用の表示切り替えをCSSだけで行う方法(その1)
PC用とスマホ用の表示切り替えをCSSだけで行う方法(その2)
PC用とスマホ用の表示切り替えをCSSだけで行う方法(その3)
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-2105
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+



Valid XHTML 1.0 Transitional スペーサー 正当なCSSです!