viewportのtarget-densitydpi=device-dpiで、ひどいことが起こった

こんにちは。x-fitチーム・エバンジェリストの渡辺です。

 

viewportのmetaタグにはいろんな指定要素があります。その中で、android向けにtarget-densitydpiという属性があるのですが、この指定の仕方によって、ブラウザ表示におかしな現象が発生しましたので御紹介します。

 

 

 

target-densitydpiは、Androidに向けて、Webサイトがどの画面密度に合わせて設計されているかを指定する属性になります。ここで言う「どの画面密度」ですが、Androidでは、もともとこの属性用の画面密度に４つ定義があります。

 

 

target-densitydpiに上記のいずれかを設定すると、実際の端末がどんな解像度を持っているかによって、自動的にスケールアップ、スケールダウンが行われて表示されるようになります。これにMediaQueriesを組み合わせて、それぞれの解像度用に画像を用意したり、CSSを切り替えたりする場合に使用されることが多い属性です。

 

このtarget-densitydpiに、device-dpiを指定すると、viewportがおかしくなり、他のサイトに移ってもそれが解消されず、ブラウザを再起動するか、別ウィンドウで開きなおすかのいずれかを行わない限り解消されませんでした。

 

まず、任意のサイトを表示します。

 

その後、target-densitydpiにdevice-dpiを指定したサイト（そのmetaタグさえあれば空のページで構いません。）に遷移し、そのまま戻るボタンで先ほどのサイトに戻ります。すると、コンテンツの配置がおかしくなってしまいます。

 

 

 

104SH・107SH・GalaxySII （いずれもAndroid4.0.3）

手元にある機種のみで確認していますのではっきりとしたことは言えませんが、Android4.0.3の機種で発生しているように見受けられます。Android4.0.2であるGalaxy Nexusでは発生しませんでした。この現象は、viewportにこの設定をしているサイトではなく、それ以外のサイトの表示に影響を及ぼすものになりますので、気づかぬうちに、よそ様のサイトに迷惑をかけるようなことが発生してしまいます。device-dpiの指定は、解像度のスケールが行われなくなりますので、対象デバイスの解像度にぴったりの形で表示できるようにはなりますが、やはりターゲットとなる画面幅を決めて、その画面幅に合わせてサイトを設計した方がよいとおもわれます。ご自分のサイトにこの設定を入れている方は、早急に見直しをされることをお勧めします。

 

x-fitは、多様なスマートフォンの画面幅・解像度・Javascript/CSSのサポート状況や機種依存を気にせず、動きのあるスマートフォン向けサイトを構築できます。是非製品情報やデモをご覧ください。