taky1973のブックマーク / 2010年8月28日

iPhoneサイトの作り方 - web.londoner25.net

先日、会社の勉強会で発表した内容をまとめます。開発言語 HTML CSS (JavaScript) 表示方法 PCと共用 iPhone専用のページ閲覧デバイスの判別方法 JSやPHPなどのスクリプトでUAを判別 ApacheでUAを判別 CSS3のメディアクエリーを用いてデバイスのスクリーンサイズによって判別メディアクエリー CSS3の新機能。link要素のmedia属性にPC用とiPhone用にそれぞれ下記のコードを挿入する。 IEシリーズはメディアクエリーを解釈してくれないので、別途CSSを用意する必要があります。 PC用 media="only screen and (min-width: 481px)" iPhone用 media="only screen and (max-width: 480px)" IE用 <!--[if IE]><link rel="styleshe

taky1973 2010/08/28

iPhone

リンク

コンテンツ・モデル

メタデータ・コンテンツ <base /> 空 <link /> 空 <meta /> 空 <noscript>-</noscript> スクリプトが無効な場合:0個以上のlink要素, meta要素, style要素スクリプトが有効な場合:テキスト <script>-</script> src属性がある場合: 空、もしくは著作権情報やAPI 情報といったスクリプトの説明文 src属性がない場合: JavaScriptのコード等(text/javascript以外を用いるのであれば、type属性は必須) <style>-</style> CSSのコード等(text/css以外を用いるのであれば、type属性は必須) <title>-</title> テキストのみ必須要素であり、必ず1個だけ定義フロー・コンテンツ <a>-</a> トランスペアレント(ただし、インタラクティブ・コンテンツ