デバイスごとに違うCSSを読み込む

外部のCSSを読み込む際，デバイス毎に違うCSSを読み込む方法．

cssを読み込むlinkタグにmediaを追加
例．

<link rel="stylesheet" type="text/css" href="mobile.css" 

media="screen and (max-device-width: 320px)">

min-device-width，max-device-widthによってデバイスの幅で指定や，

orientation:portrait(端末が縦向き)，orientation:landscape(端末が横向き) 

などで指定する．

参考URL

• iPadやiPhoneなど、デバイスごとに最適化したCSSを読み込む Media Queries ::ハブろぐ 

• MediaQuery まとめ - IT戦記 

viewportによるスマートフォンなどに合わせたHTMLの記述

自分向けにスマートフォンなどで見る文書の形式は何が最適か分からないが，
今のところPDFとHTMLで悩んでいるので，とりあえずHTMLの勉強．

Webページの表示する領域を指定するのにviewportを利用．
例．
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">


width=device-width : 幅をデバイスの幅に合わせる
initial-scale=1 : 倍率の初期値を1にする
user-scalable=yes : 拡大縮小を許可する

その他のプロパティにはheight，minimum-scale，maximum-scaleがある．

参考URL

• Viewport [iPhone生活]
• スマートフォン用（iPhone・Android）Webページデザイン、viewport の指定 : Serendip - Webデザイン・プログラミング