先週、あるクライアントのサイトに予約システムの導入のため、iframを使用した予約カレンダーのソースを左メニュー下のスペースに設置しました。Windowsでのブラウザチェックを済まして完了の連絡をしたところ、Macのサファリでスクロールバーがでると指摘され増した。
うちの会社ではWindowsマシンしかなく、Macでの表示チェックはサファリの開発メニュー⇒ユーザーエージェントでシュミレートしていたのですが、実機での表示とはやはり違うようでした。
サイズの調整をしてちゃんと表示されるようになりホッとひと安心。
が、月曜日に連絡がはいり、FireFoxでスクロールバーが出るといわれ、あわててサイズをさらに伸ばして解決しました。
その際に、以前アドビにブラウザチェックツールがあった事を思い出し、使ってみることに。
まずはhttps://browserlab.adobe.com/ja-jp/へアクセス。
するとサインイン画面へ移動します。
ADOBEのアカウント（無料）でサインインします。
使い方：ブラウザーセット
まず、中央のブラウザーセットでチェックするブラウザを選択します。
今回は、Win、MacのFireFox3.6でチェックします。
使い方：テスト
ブラウザセットが完了したら、右の「テスト」をクリック。
チェックするサイトのアドレスを中央に入力し、スタート。
読み込みに少し時間がかかりますが、終了したら表示されます。
使い方：表示
アドレス入力の左側の「表示」をクリックすると、下記のようなメニューが出てきます。
1-upビューは1画面表示。
左上に表示されているブラウザ名をクリックして、他のブラウザに変更できます。
2-upビューは2画面表示
左右に表示され比較しやすくなります。
オニオンスキン
ブラウザセットで選択された全てを重ねて表示されるので、どれだけ表示にズレがあるか一目瞭然です。
2-upビュー表示
オニオンスキン表示
他にも便利なショートカットや機能があるようですが、とりあえずチェックできればいいかな。ということで省略します。
全体のシェアでいえばWindwsのIEが80％を占めているので、Macはおざなりになりがちですが、やはりクライアントの中にはMacを使っている人もいるので今後はこのツールでのチェックも欠かせなくなりそうです。
「ここでき！」