やりたいこと・・・タイトルまんま。Flashを使っているサイトの場合、iPhone用の表示も作らないと。
↓PHPの場合。
$ua = $_SERVER['HTTP_USER_AGENT'];
if((ereg("iPhone",$ua)) || (ereg("iPod",$ua))) {
//iPhone用の出力;
} else {
//その他用の出力;
}
↓javascriptの場合。
var agent = navigator.userAgent;
if( agent.search(/iPhone/) != -1 ){
document.write('iPhoneだった場合の出力');
}else{
document.write('iPhoneじゃ無い場合の出力');
}
確認・・・Dreamweaver cs4以降
■Dreamweaverのプレビューがクソ重い。■
原因１・・・cssのid,class名に「-(ハイフン)」を使っている。
id,class名に記号の上では「マイナス」と同じハイフンを使うと、Dreamweaverがこれをマイナス要素かどうかいちいちチェックするので遅くなる。
（ソース）
対処法・・・id,class名にハイフンを使わない。
ソースには「ハイフン」を「_（アンダーバー）」に差し替えるなどの対処法が書いてあるが、かなり古いブラウザの場合はアンダースコアさえ認識しない場合があるので、一応心に留めておく。
ちなみに僕はセレクタ名が長くなる場合はキャメルケースで書いてます。
wrapperLeftContainer
みたいな。
ただcssではIE5以下は大文字を解さないので、同じクラスタ名で大文字小文字の使い分けはできない。
原因２・・・背景にpng画像を繰り返し使用
よくbody背景にpng画像を繰り返し使用するが、これが透過だったりする場合、クソ重くなる。
対処法・・・デザインタイムスタイルシートを使う。
Dreamweaverのデザインタイムスタイルシートでbody背景を表示させない。
もちろんプレビューで背景は表示されないけど。
ちなみにデザインタイムスタイルシートは基本的にこちらが設定したcssより先に読み込まれるので、
!importantを使って強制的にデザインタイムスタイルシートを優先させる。
liを使ってリストを作り、その中にリンクを貼ってdisplay:blockした場合、IE6ではバグで隙間が出来る。
これはmargin,paddingを指定しようが消えないので、
a要素にzoom: 1;を指定すると解決する。
あとSafariでは、リストのulタグにmargin,paddingを指定していなかった場合、たとえユニバーサルセレクタ（*を使ってcss全部に適用させるセレクタ）でmargin,paddingを0pxに指定してても変な隙間が出来る。
そのため、その都度ulにmargin,paddingを0で指定しておく。
FOMAで中途半端に対応している"i-css"。
携帯サイトをdocomoに対応させるには、以下が大前提。
■cssをbody内に書かないといけない（外部css非対応）
<h1 style="color:#808080">SITE TITLE</h1>
こんな感じで一個一個書く。めんどくさい。
■cssをヘッダに書かない（a要素だけは例外に対応している）
<style type="text/css">
<![CDATA[
a:link{color:色コード;}
a:visited{color:色コード;}
a:focus{color:色コード;
}
]]>
</style>
上記をヘッダに入れるとリンク時の色を変えられる。（CDATAにしないと、携帯では文字として出力されてしまうっぽい。xhtmlの場合、通常のhtmlコメントでは内部が完全に無視されるのでＮＧ）
■拡張子がxhtmlでないといけない。(htmlではダメ）
htmlの場合は、.htaccessに
AddType application/xhtml+xml .html
を入れると対応する。
拡張子がphpの場合は、該当ファイルのド頭に
header("Content-type: application/xhtml+xml");
を挿入。
一応参考までに今作ってる携帯サイトのヘッダを記載。（間違ってたら申し訳ない）
<?php header("Content-type: application/xhtml+xml"); ?>
<?php echo '<?xml version="1.0" encoding="Shift_JIS"?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>Studio Cooper</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="content-Style-Type" content="text/css" />
<meta name="keywords" content="キーワードを挿入" />
<meta name="description" content="説明を挿入" />
<link rel="index" title="サイトタイトルを挿入" href="http://<?= $_SERVER["SERVER_NAME"]; ?>" />
<link rel="canonical" href="http://<?= $_SERVER["SERVER_NAME"]; ?>" />
</head>
画像をシンプルに拡大表示してくれるスクリプト、fancybox。
MITライセンス（スクリプト内の著作権表示を消さなければ商用サイトにも使える)で重宝するのだが、導入時にIEで表示されずに少し詰まったのでメモ。
導入はこちらのサイトを参考に。
jquery.fancybox.cssを開くと、後半のIE用の画像を指定する部分がずれている。
僕はサイトルートから/js/fancybox/の中にファイルを入れていたので、
fancybox/fancy_loading.png以下IE用の画像指定を全部
js/fancybox/fancy_loading.pngに変更する事で解決した。