iOS safari:viewport(2)

initial-scaleの設定

以下の画像は前回の最後に紹介した表示幅にdevice-widthを利用したものです。
ここで不満に思ったのが、横向きにしたら320pxではなく480pxにして欲しい
ということです。横向きでも320pxだと、表示倍率が変わってしまいますから…。
 

 
そこで次に試したのがviewportのinitial-scaleです。これを1(等倍)にしておけば
表示倍率が変化するのを避けられるのかな….と。ですが、実際は以下の様にダメでした。
横にしても320pxになってしまいます。
initial-scaleに1を設定したサンプル
これをiPodTouchで表示すると以下の様になります(クリックで実物表示)。
 

 
問題は右側の横の状態です。幅は320pxでコンテンツサイズが480pxになってしまって
います。コンテンツは固定幅でないから、この時点で予想外の表示になっています…。
さらに検証すると、最初から横にした状態でこのページを見ると、予想通り480pxの
幅で表示されます。
 

 
ここで気が付いたわけです。initial-scaleという名前ですから
最初だけ1で表示して、向きを変えたら倍率が変わってしまうのだと….。
 
 
 

maximum-scaleの設定

そこで次に試したのがmaximum-scaleです。これで必要以上に大きく表示されるのを
防ぐことができます。
maximum-scaleに1を設定したサンプル
これをiPodTouchで表示すると以下の様になります(クリックで実物表示)。
 

 
しかし、ここでまた予想外のことが発生しました。縮小もできなくなったのです…。
minimum-scaleを0.1とかに設定しても無理でした…。しかしinitial-scaleを0.1にすると
0.1〜1.0までの拡大縮小ができるようになりました…。問題の解決にはなりませんが。
しかしスマートフォンサイトの多くでは拡大縮小をできないようにしているので
これは問題にならないと思います。
 
 
 

user-scalableの設定

実は、この記事を作成するにあたり多くのスマートフォン用サイトのviewpoint設定を
確認しました。ほとんどのケースで拡大縮小をできないようにしています。そこで
利用されているのがuser-scalableです。これをnoに設定するとユーザーによって
拡大縮小することができなくなります。今回の検証では、すでにmaximum-scaleの
設定をした段階で拡大縮小できなくなっていますが、これも念のため設定した方が
よいのでしょう。
maximum-scaleに1を設定したサンプル
見た目はmaximum-scaleを設定したサンプルと変わらないので、
キャプチャは省略します。
 
 
 
最後に多くのサイトで設定されていたviewportを書いておきます。

viewportの設定
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no”>
※minimum-scaleは設定されていませんでした。
※区切り記号にカンマではなくセミコロンが利用されているサイトがありましたがカンマが正式だそうです。

 
上記の他にreset.cssで利用した以下の設定もポイント。これを設定しておくことで縦向きでも
横向きでも文字の大きさが変化しなくなります。

 -webkit-text-size-adjust: 100%;

 
おしまい
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


七 + = 13


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>