Webサイト作成後は必ず各ブラウザで検証する必要があります。各ブラウザで微妙に表示差があるからです。Macでの検証はもちろんのこと、WindowsPCやiPhone、iPad、Androidスマホ、タブレット、いろんなメディアに対応させればさせるほど、検証の幅も広がります。組織でWebサイトを作成する場合はそれなりの検証環境があると思いますが、個人で作成された場合は検証が結構大変です。PCだけならまだしもレスポンシブで作成された場合などは、スマホ、タブレットも検証する必要があります。
PCでの検証はIEが鬼門
PCの検証は日本で最大のシェアを誇るInternetExplorer（以下IE）での検証が必須です。特にMacはIEをインストールすることができませんので、検証も他のブラウザより手間がかかるので面倒に感じますが、Webサイト作成でのルーチンワークの１つと思って取り入れてください。
スマホの検証はAndroidが鬼門
MacでWebサイトを作成する場合はiPhoneやiPadはXcodeのシミュレーターの精度が高いので、実機がなくてもかなり実機に近い環境で確認できますが、問題はAndroidです。端末毎にオリジナルのブラウザがあったりして全ての環境を個人で検証するというのは、なかなか高いハードルです。2系、4系で振る舞いが違うのも厄介です。日本だけで考えればAndroidはIEみたいな存在です。そして主に差異があるのはjsですのでjsの動作には入念なチェックが必要です。
iPhone Simulator.app
iPhoneのシュミレーターはXcodeインストール後Xcode.appを右クリックし、パッケージの内容を表示＞Contents＞Applications＞iPhone Simulator.appにありますのでDockに登録しておくと便利でしょう。XodeはApp Storeから入手できます。iPhone Simulator.appへのパスは以下の通り。
/Applications/Xcode.app/Contents/Applications/iPhone Simulator.app
タブレットの検証
スマホよりもタブレットは表示崩する可能性が高いです。スマホの場合は領域の問題でワンカラムで作成することがほとんどなのに対しタブレットは2カラム以上で作成されることもあります。サイズ指定を大人の事情でパーセントとピクセルを混在させる場合があるのですが、そのような場合は念入りに検証する必要があります。そしてスマホもタブレットもポートレートモードとランドスケープモードがありますので一周するだけでもかなりの時間を要します。
改行と折り返し位置の差異
MacとWindowsでは文字詰めが違いますので、文字の折り返し位置が違います。レスポンシブの場合はPCでの改行位置がスマホで変だったりすることがあります。逆もしかりです。その辺の改行と折り返し位置が気になる場合はそれぞれにbrを設定して調整します。スマホのみで改行するときはPCのCSSはbrにdisplay:none;を付与し逆にPCのみ改行の場合はスマホのbrのCSSにdisplay:none;を付与します。当サイトでもあまりにも改行位置が気になるときはその方法で調整しています。
