スマートフォン向けサイトのブラウザー確認でinitial-scaleを考慮する

スマートフォン向けサイトを作る際、手間がかかるのがブラウザーでの確認。

実機で見るのが一番なのですが、すぐ見たいときはFireFoxのアドオン、FireMobileSimulatorとDefault Full Zoom Levelを使って確認をしています。

FiremobileSimulatorでUserAgent偽装とウインドウ幅の指定ができ、これだけでも十分なことがほとんどなのですが、パソコンのブラウザー内ではViewportのinitial-scale、画面の拡大縮小の設定が考慮されないため、Default Full Zoom Levelを使って表示幅を拡大、縮小させて確認しています。

FiremobileSimulatorの説明は検索をするといろいろ出てくるので割愛して今回はDefault Full Zoom Levelについて少し触れたいと思います。

FireFoxのアドオンサイトからインストールしたあと、そのままではブラウザーのツールなどに表示されないので、FireFoxの表示→ツールバー→カスタマイズを押してツールバーのアイコンを設置するためのウインドウを開きます。

Caps01

 

その後、Default Full Zoom Levelのアイコンをツールバーにドラッグして適用すればすぐに使える状態になります。

Caps02

 

一般的なスマートフォン向けサイトではintial-scaleを1~0.6で設定するので必要な場合は必要な設定を追加した上で表示を確認します。

Caps03

 

パソコンでの確認をベースに制作と進めてしまうと完成後にフォントサイズに違和感を感じたり、文字の改行がおかしくなったりしやすいので、それを未然に防ぐ意味でも拡大、縮小を、できればスマートフォン上でも文字のサイズ変更ができるので(Androidの場合など)一度形になった時点で確認することをお勧めします。

 

サイトの内部遷移リンクをブラウザーのボタンに対応

先週リニューアルしたcdbk.net CREATIVES.のタブメニューによるリンク遷移に手を加え、各メニューに直リンクできなかったものを直リンクできるようにしました。

cdbk.net CREATIVES.

jQueryを使ってタブメニュー毎にレイアウトを設定しているので、その設定をクリックした際にページ内の遷移がわかるよう内部リンク(#〜)の追加とクリックした際に飛び先をフラグとして残す機能を追加。フラグとアドレスを判定して、違う場合はアドレスにあったコンテンツに移動するようにしています。

たとえばサービス内容のページお問い合わせのページなどもリンクとして指定できるようになりました。

パソコンでブラウザーでAM/FMラジオを聴く

IPサイマル放送が15日からいよいよ試験放送が本格的に始まる。

アドレスは「http://www.radiko.jp/

学生の頃は聴いていたけれど、今は聴いていないという人や若い人の中にはラジオの聴き方、チャンネルを合わせる方法を知らない人がいる現代。ラジオの改革が始まっています。

IPサイマルなのでプロキシ使えばもしかすると在阪局のものを聴けたりするのでしょうか?

録音したい方にオススメなのがradioSHARK2

相次ぐブラウザーのアップデート… その後

このブログや自分のサイトではMS(IE)勢が6割、FireFox3.5割、残りがその他という割合。
新しいIEのバージョン7は割合でいうと1割程度で大半は6.0です。
既存のサイトの一部でIE7.0での閲覧時に崩れたり、スクリプト、特にAjax系でデータ送受信を行っているものでアラートが出てしまったりするようなのですが、このブログやサイトでは今のところ不具合なし。
最近FireFoxをメインにするようになってから、体裁が崩れることがかなり減りました。
そして最近気になるのはロボットエンジンからのアクセス、よく来るものは1日に3回くらいクロールしてるみたいです。