スマートフォンからのアクセスの判断とWEBレイアウト



最近、スマートフォン、Nexus 7の利用頻度が上がっているので、レスポンシブWEBデザイン対応が必要になりつつある。

ゼロから始めるレスポンシブWebデザイン入門

Media Queries

W3C Recommendation 19 June 2012

文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう

スクリーン情報のテストページ   http://uchukamen.com/mobile/screen.html

userAgent(ユーザーエージェント一覧)

方法1 CSS の Media Query

同一のスタイルシートで扱うなら

例; 320画素-479画素まで

@media screen and (min-width: 320px) and (max-width: 479px) { … }

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { … }

方法2 link

スタイルシートを分離するなら

<link rel="stylesheet" media="all and (orientation: portrait)" href="portrait.css">

方法3 userAgent

userAgentで判断

if (navigator.userAgent.indexOf(‘iPhone’) > 0 ||

navigator.userAgent.indexOf(‘iPad’) > 0 ||

navigator.userAgent.indexOf(‘iPod’) > 0 ||

navigator.userAgent.indexOf(‘Android’) > 0) { … }

デバイスの情報

  screen.

width
screen.

height
screen.

availWidth
screen.

availHeight
device

PixelRatio
window.

orientation
PC (ie10) 1920 1080 1920 1040 undefined undefined
Nexus 7 縦 800

縦→横にしても変化しない
1205

縦→横にしても変化しない
800 1205 1.331 0

縦→横にすると90
Nexus 7 横 1280

横→縦にしても変化しない
736

横→縦にしても変化しない
1280 736 1.331 90

横→縦にすると0
Windows Phone 7 縦 480 800 480 800 undefined undefined
Windows Phone 7 横 480 800 480 800 undefined undefined
iPhone 4縦 320 480 320 460 2 0
iPhone 4横 320 480 320 460 2 90
iPhone 4S            
iPhone 5            
Arrows X LTE 縦 1081 1680 D:\Visual Studio Projects\ngensol5\ngensol5\Content\1081 1680 2 0
Arrows X LTE 横 1081 472 1081 472 2 90

iPhone4やiPhone4Sの画面サイズは640×960ですが、3G/3GSとの互換性から、screen.widthの値が320、screen.heightの値が480になっています。これを補正するために、window.devicePixelRatio で補正します。しかし、devicePixelRatio は、Microsoft 系ではサポートされていません。

Media Query時の device-width, width

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=2" />

  viewport を指定しない場合 viewport を指定しない場合 viewport を指定 viewport を指定
  device-width width device-width width
windows  phone 7 480 1024 480 320
Nexus 7 600 980 600 600
iPhone 4        
iPad        
         

/* windows phone 7向けCSS*/

@media only screen and (device-width: 480px){…}

/* Nexus 7向けCSS*/

@media only screen and (device-width: 600px){…}

/*iPhone 3向けCSS*/

@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) {…}

/*iPhone 4向けCSS*/

@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) {…}

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中


%d人のブロガーが「いいね」をつけました。