スマートフォン独自の仕様 viewportについて
スマートフォンでの可視領域やズームなどの設定をするmeta要素がviewportです。
viewportの各プロパティ
- width(幅)
- 可視領域の幅。デフォルト値は980px。
200pxから10000pxまでの範囲を指定できる。 - height（高さ）
- 高さ。デフォルト値はwidthの値とデバイスのアスペクト比から算出される。
233pxから10000pxまでの範囲を指定できる。 - initial-scale（ズームの詳細設定）
- ページが可視領域内にフィットするように計算された値がデフォルト値となる。
minimum-scaleからmaximum-scaleによって定義された範囲の値が指定できる。
最初にページが表示されるviewportの値のみが指定可能。
user-scalableにnoを指定していなければズーム操作が可能になる。
ズームの範囲はminimum-scaleとmaximum-scaleの範囲内に制限される。 - minimum-scale（最小縮小比率）
- viewportの最小scale値。
デフォルト値は0.25。
0から10.0までの範囲を指定できる。 - maximum-scale（最小拡大比率）
- viewportの最大scale値。
デフォルト値は1.6。
0から10.0までの範囲を指定できる。 - user-scalable（ズームの有無設定）
- ユーザーがズーム操作できるかどうかをyesとnoで指定する。
デフォルト値はyes。
noを指定するとテキスト入力フィールド内でのスクロールも制限される。
viewport指定の一例
<meta name="viewport" content="[プロパティ]=[値], [プロパティ]=[値], [プロパティ]=[値]">
幅はデバイスに準拠、ズームはさせないという設定であれば下記のように記述する。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
Androidブラウザでviewportのwidth指定する際の注意点
Androidブラウザではviewportのwidthに数値が指定できない。
代わりにJSで実装する方法などがある。
http://blog.webcreativepark.net/2011/01/11-023827.html
iPhone向けSafariでのみ使えるmetaタグ
全画面表示（yes）
デフォルトはnoになっている。
<meta name="apple-mobile-web-app-capable" content="yes" />
ステータスバーのカラー設定（default / black /black-translucent）
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
電話番号、メールアドレスのリンクの自動検出設定（telephone=no）
自動検出はデフォルトでonの状態。telephone=noでoffに設定できる。
<meta name="format-detection" content="telephone=no" />
HTMLテンプレート
- HTML5/CSS3でコーディング
- 各種設定はviewport又はjavascriptで行う
- widthを指定しない場合はリキッドレイアウトで行う
<!DOCTYPE HTML> <html lang="ja"> <head> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <title>タイトル</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1></h1> </header> <article> <section> <h2></h2> <p></p> </section> </article> <nav> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </nav> <footer> <p></p> </footer> </body> </html>
スマートフォンサイト作成で役立つスクリプト
jQuery mobile
スマートフォンサイト作成のフレームワーク
http://jquerymobile.com/
jQuery mobileについて
http://www.u-ziq.com/blog/2010/11/jquery_mobile.html
iPhoneかAndroidかを判定してbodyにクラスを付けるjavascript
http://html-coding.co.jp/knowhow/smtp/000178/
iPhoneかAndroidで傾きに合わせてスタイルを切り替えるjavascript
http://html-coding.co.jp/knowhow/smtp/000140/
スマートフォンのユーザーエージェント
| キャリア | 端末 | OS | ユーザーエージェント |
|---|---|---|---|
| DoCoMo | HT-03A | Android 1.5 | Mozilla/5.0 (Linux; U; Android 1.5; ja-jp; HT-03A Build/CDB72) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1 |
| Android 1.6 | Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; Docomo HT-03A Build/DRD08) AppleWebKit/528.5+(KHTML, like Gecko) Version/3.1.2 Mobile Safari/ 525.20.1 |
||
| Xperia | Android 1.6 | Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; SonyEricssonSO-01B Build/R1EA018) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1 | |
| BlackBerry | - | BlackBerry9000/4.6.0.224 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/220 | |
| LYNX(SH-10B) | Android 1.6 | Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; SH-10B Build/S7023) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1 | |
| SH-03C | Android 2.1 | Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; SH-03C Build/SB110) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 | |
| Galaxy S | Android 2.2 | Mozilla/5.0 (Linux; U; Android 2.2; ja-jp; SC-02B Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 | |
| Galaxy Tab | Android 2.2 | Mozilla/5.0 (Linux; U; Android 2.2; en-us; SC-01C Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 | |
| Mozilla/5.0 (Linux; U; Android 2.2; ja-jp; SC-01C Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 | |||
| REGZA Phone | Android 2.1 | Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; T-01C Build/TER018) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 | |
| SoftBank | HTC Desire | Android 2.1 | Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; HTCX06HT Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 |
| iphone3G iphone3GS |
iphone OS3 | Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7E18 Safari/528.16 | |
| iphone4 | iOS4 | Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7 | |
| au | IS01 | Android 1.6 | Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; IS01 Build/S6191) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1 |
| IS02 | Windows Mobile 6.5.3 | Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 8.12; MSIEMobile 6.5) KDDI-TS01 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; KDDI-TS01; Windows Phone 6.5.3.5) |
|
| IS03 | Android 2.1 | Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; IS03 Build/SB060) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 |
PCでブラウザチェックをするためのシミュレーター
iPhone(iBBDemo)
http://labs.blackbaud.com/NetCommunity/article?artid=662
Android(Android SDK)
http://developer.android.com/sdk/index.html
via ユージック