ECサイト運営開発記

PHPフレームワーク Laravelの使い方を中心とした通販サイトの開発日記

iPhoneサイトをHTML5で作り直した。

EC

カレンダー通販のE-カレンダーcomのiPhone版を再度作り直しました。

  • 縦向きの横幅：320px、横向きの横幅：420pxでも閲覧可能。
    • リキッドレイアウト(可変レイアウト)
  • ユーザーエージェントで判別
  • ヘッダーのデザイン変更

　

  • HTML5でコーディング
    • 新しいheaderタグ/footerタグ/sectionタグ/navタグを使った程度。
    • jquery使えるかどうか不安だったけど、問題なく動く。
    • コーディングはずいぶん楽に
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    <title>TITLE</title>
  </head>
  <body>
    <header></header>

    <footer></footer>
  </body>
</html>
  • jqueryでダイアログ表示
    • カテゴリー一覧と商品検索ボックスがダイアログで表示される。
  • iPhone第3世代/iPodTouch第1世代で動作確認済み
    • iPhone4では動作未確認
  • CSSのposition:fixedがMobileSafariでは未対応らしい
    • CSSだけではフッターの固定化はできないっぽい。
      • 試行錯誤したけど無理だった。
      • iscrollというライブラリを使うとできるっぽいけど、試してない。
      • いい方法があれば、どなたかご教授を...
  • トップページ

  • ショッピングカート

  • カテゴリー一覧と商品検索ボックスはダイアログで表示される



  • 入力フィールドはタッチしやすいように

HTML5&CSS3辞典 (Pocket詳解)
HTML5&CSS3辞典 (Pocket詳解)
posted with amazlet at 10.08.26
大藤 幹
秀和システム
売り上げランキング: 2919
Amazon.co.jp で詳細を見る

HTML5タグ事典―主要ブラウザ・ベンダーが推進する次世代規格 (I・O BOOKS)
HTML5タグ事典―主要ブラウザ・ベンダーが推進する次世代規格 (I・O BOOKS)
posted with amazlet at 10.08.26
アスアス
工学社
売り上げランキング: 24032
おすすめ度の平均: 5.0
5 XHTM1.xで製作出来ている方なら
Amazon.co.jp で詳細を見る