viewportの設定

今回はhtml5でのhead定義のひとつ「viewport」についてです。
「viewport」は、おもにモバイルデバイスでのページ表示を制御するためのものだと考えてください。

「target-dencitydpi」

「target-dencitydpi」は、デバイス上での「見た目の解像度」の制御を行います。
この「見た目の解像度」って、なかなか理解しにくい概念です。
「見た目の解像度」ってなんだろう‥‥という方のためにも、
以下にその考え方をまとめてみました。

近頃は新旧のデバイスが百花繚乱、さまざまなユーザー環境がある中で、
できる限り見た目を統一するための技なのです。

「target-dencitydpi」の設定有無が影響しています。

http://blog.webcreativepark.net/2011/01/31-121759.html

たとえば、「target-dencitydpi」の定義を省略したとします。
この時、ブラウザ上ではデフォルトである「medium-dpi」で表示されます。
これが「high-dpi」などと定義されたページを表示した後、
ブラウザバックで戻ってくると、
何も定義がないdメニュー側で表示が崩れるというお話です。

この問題はICSでのみ発生し、GB、JBでは起きないようです。
英文ですが、まさにこの問題を記述した記事を拾っておきました。

http://randomstrings.blogspot.jp/2012/10/android-ics-and-target-densitydpi.html

上記記事では対処法として、
「トップページにだけ”medium-dpi”って書いちゃいなよ」
とまとめてますが、
もし構築済みのページにこれを追記しようと考えているのであれば、
見た目の崩れが起きないかどうか、慎重に確かめたほうがよいかもしれません。

html5のhead要素

今回はhead要素に記述するべき内容についてまとめてみます。

html5では、html4のころと違って、head要素で一部のページ構成を指定することを推奨します。
これらは主に、Androidやiphoneなどの、モバイルデバイスで画面の表示を適切にするための技でもあります。
具体的には、「」「vieport」などの指定を行います。

viewportとは、デバイスの画面表示を設定するための定義です。
viewportには以下のような設定があります。
「user-scalable」
「target-dencitydpi」

それぞれの詳細な解説は次回以降に‥‥