ヨコハマハンドメイドマルシェ2013

【iPhone・iPad】サイト制作のまとめ

iPhone/iPad独自タグや、便利なタグなどまとめました。それぞれの注意点とか発見した不具合とか掘り下げると色々とありますが、ひとまず以下まとめて列挙してみました。

■metaタグ:基本のviewport
<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, ">
widthとheight:最初に読み込まれる表示サイズ。widthを指定しないと横幅980px。
initial-scale:最初に読み込まれた際の拡大率
user-scalable:ユーザーが拡大できるか否かを、yesかnoで設定
maximum-scale:ユーザーが操作可能な拡大率の上限
minimum-scale:ユーザーが操作可能な拡大率の下限

■metaタグ:電話番号自動判別
電話番号を自動で判別するかどうかのyesかnoで設定できます
<meta name="format-detection" content="telephone=no" />

■metaタグ:ページの全画面表示
Safariのユーザーインターフェイスコンポーネントを非表示にしてアプリのように起動
<meta name="apple-mobile-web-app-capable" content="yes"/>

■metaタグ:ステータスバーの外観を変更
<meta name="apple-mobile-web-app-status-bar-style" content="ここに指定">

black/black-translucent/defaultいずれかをいれる

■アイコン指定
お気に入りをホームに指定したときにアイコンの指定
<link rel="apple-touch-icon" href="/custom_icon.png"/>

■起動イメージを指定
WEBサイトというよりオフラインのWEBアプリを作るときに便利。
<link rel="apple-touch-startup-image" href="/startup.png">

■アプリケーションキャッシュ
HTML5のアプリケーションキャッシュの仕組みを用いてデータをローカルにキャッシュさせて高速起動ができます。
1.php.iniファイルに
AddType text/cache-manifest .manifest
と記述
または、.htaccessファイルに
AddType text/cache-manifest .manifest
と記述
2.以下をヘッダー最初のところに挿入
<html manifest="cache-manifest">
3.cache.manifestファイル作成
CACHE MANIFEST
# musiclist manifest ver 1.0
index.html
common.js
.
.
.
などキャッシュ残したいファイルを列挙

■フォームの自動校正
<input type ="text" autocorrect="on">

■フォームの自動大文字化(英文の1文字目)
<input type ="text" autocapitalize="on">

■iPhone用CSS
・自動フォントサイズ調整を設定する
-webkit-text-size-adjust: (100% | none | auto);
・タップ時の色を変更する
-webkit-tap-highlight-color: #000;

■CSSをiPhone用に切り分ける
<link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<link href="pc.css" type="text/css" rel="stylesheet" />
<![endif]-->
IE向けに条件分岐を書いているのはIEがmedia queryに対応していないからだそうだ。

※既存のCSSに追記するときは
@media screen and (max-device-width: 480px) {
この中に指定
}
■その他の便利グッズ
・iPhoneテンプレート for MovableType
既にPC用のコンテンツを公開しているMovable Typeに追加するだけで、別途iPhone用のコンテンツを自動生成するテンプレート!
オープンソースです。
http://cremadesign.jp/blog/iphone/iphone_template_for_mt.html

・iPhone用デザインパーツ素材 PSDデータ
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/

以下参考にさせて頂いたサイトです。もっと掘り下げて説明しているのでとても分かりやすいです。
Safari Web Content Guide: Configuring Web Applications
iPhone向けSafari、HTML拡張属性を使いこなす
iPadでHTML5でWebアプリを作ってみました。
iPhone / iPod touch 向けのmeta要素 viewport
iPhone用CSS

コメント
コメントする








   
この記事のトラックバックURL
トラックバック
かかえているサイトを急にスマートフォン対応して! なんて時に困らない様に、スマートフォン特有のデザインやユーザビリティ等、構築時に抑えておきたいサイト・記事を...
  • caraldo.net | WebとiPhoneとロードバイクが大好き!
  • 2010/12/07 11:59 PM

Profile

Yuki Noda
1982年横浜で生まれる。多摩美術大学卒。
プロフィールポートフォリオ
mixitwitterFacebook

calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
<< September 2017 >>

selected entries

categories

archives

recent comment

  • 【Illustrator CS3】 [不明なエラーが発生しました]で.ai拡張子の保存ができない
    MAMORUさん (12/08)
  • 【Illustrator CS3】 [不明なエラーが発生しました]で.ai拡張子の保存ができない
    MAMORU (09/20)
  • 【Flash】IEでjavascriptのプルダウンがFlashの後ろに隠れてしまう事件
    ゆうき (09/04)
  • 【Flash】IEでjavascriptのプルダウンがFlashの後ろに隠れてしまう事件
    rr (08/31)
  • スーパーカップのチョコミントアイスについて
    ゆうき (06/13)
  • スーパーカップのチョコミントアイスについて
    aaammm (06/13)
  • スーパーカップのチョコミントアイスについて
    ゆあ (04/11)
  • 【CSS】IE6 リストで隙間が出るバグ
    D (11/14)
  • 夢のような結婚式を終えて・・
    ゆうき (10/04)
  • 夢のような結婚式を終えて・・
    ちゃっきー (10/03)

recent trackback

links

profile

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM