本年度より東京のweb制作会社に入社しました。
新人webデザイナー／デベロッパーとして早く一人前になれるよう日々精進していきたいと思います。このブログは備忘録として継続していきます。
まずスマートフォンでのHTML5の基本的構造からおさらいする。スマートフォンと言ってもiOS専用のプロパティを多く含んでいるが、基礎構造のテンプレートはだいたいこんなもんだろう。
viewportの設定
①width
viewportの横幅。device-widthでデバイスと同じ横幅を指定している。ますはiPhoneで合わせて、androidはこれを基準に調整するのがいいかも。
②initial-scale
拡大率の初期値。とりあえず１
③user-scalable
ユーザーがピンチなどでの拡大／縮小操作をできるようにするか。yesで操作を許可、noで操作させない。
②initial-scale
拡大率の最大値。1~10までの数値を入れることができる。
iOSのwebClip系の設定
①apple-mobile-web-app-capable
webClipの機能を有効にする。（要検証項目）
②apple-mobile-web-app-status-bar-style
URLやメニューを隠して、ステイタスバーのみを表示する。
ステイタスバーの色は"default"でデフォルト色（不透明）、blackで黒（不透明）、black-translucentで黒（半透明）で設定する。
③apple-touch-icon
webClipを作った時にホーム画面に追加されるアイコンの指定。
"apple-touch-icon"で光沢付き、"apple-touch-icon-precomposed"で光沢なし。
href属性にdetaスキームを使っているのは、オフラインや3G回線の遅いときにアイコンのデータをわざわざ通信して取って来ないようにする為らしい。でもオフライン状態でwebClipを作る場合があるかは微妙なところなので要検討項目。
以上、とりあえずな暫定的な状態だがまとめてみた。