スマートフォン向けサイトを作る際、手間がかかるのがブラウザーでの確認。
実機で見るのが一番なのですが、すぐ見たいときはFireFoxのアドオン、FireMobileSimulatorとDefault Full Zoom Levelを使って確認をしています。
FiremobileSimulatorでUserAgent偽装とウインドウ幅の指定ができ、これだけでも十分なことがほとんどなのですが、パソコンのブラウザー内ではViewportのinitial-scale、画面の拡大縮小の設定が考慮されないため、Default Full Zoom Levelを使って表示幅を拡大、縮小させて確認しています。
FiremobileSimulatorの説明は検索をするといろいろ出てくるので割愛して今回はDefault Full Zoom Levelについて少し触れたいと思います。
FireFoxのアドオンサイトからインストールしたあと、そのままではブラウザーのツールなどに表示されないので、FireFoxの表示→ツールバー→カスタマイズを押してツールバーのアイコンを設置するためのウインドウを開きます。
その後、Default Full Zoom Levelのアイコンをツールバーにドラッグして適用すればすぐに使える状態になります。
一般的なスマートフォン向けサイトではintial-scaleを1~0.6で設定するので必要な場合は必要な設定を追加した上で表示を確認します。
パソコンでの確認をベースに制作と進めてしまうと完成後にフォントサイズに違和感を感じたり、文字の改行がおかしくなったりしやすいので、それを未然に防ぐ意味でも拡大、縮小を、できればスマートフォン上でも文字のサイズ変更ができるので(Androidの場合など)一度形になった時点で確認することをお勧めします。
