Archive for category スマートフォン
スマートフォン用サイトのviewportについて
明けましておめでとうございます、そして初めまして
ソリューション事業部の内田です、新年から色々忙しいですが頑張っていきます!
さて、今回スマートフォン用サイトをいじる機会があったのでそこで知らなかった知識を
1つ紹介したいと思います。
スマートフォン用サイトを作る際のviewportの記述方法について。
機種ごとの横幅を検出し、自動的に横幅設定するには
<meta name="viewport" content="width=device-width" />
さらに拡大縮小禁止にするには
<meta name="viewport" content="width=device-width,user-scalable=no" />
拡大縮小禁止を違う方法で実現するには
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
各項目説明
・width=device-width・・・デバイス毎の横幅を指定してくれる
・user-scalable・・・noで拡大縮小禁止、yesで拡大縮小可能
・initial-scale・・・倍率の初期値(100%の場合は1.0,120%の場合は1,2等)
・maximum-scale・・・倍率の最大値
・minimum-scale・・・倍率の最小値
以上が今回使用したviewportの一覧です、今年はさらにスマートフォンが活性化してくるようなので
こういったことを学ぶ機会は多くなってきそうだなと思います。
iPhoneでWebサイトの表示が小さい場合の対処法
先日のiPhone自動文字縮小について記述しましたが、今回iPhone向けサイトを構築していて、シミュレータなどと比較すると非常に画像サイズが小さく、縮小されて表示されてしまうという現象となりました。
どうも、iPhoneはデフォルト横幅960pixとしてレンダリングし、それをiPhoneの解像度にあわせて縮小表示するようです。
これを実際のpixelにあわせて表示させるためにはmetaタグにて viewportの指定を行う必要があります。
iPhone3 iPhone3GSの解像度ぴったりにあわせる場合には
<meta name=”viewport” content=”width=320″ />
と指定することによって、サイトを横幅320pixとしてレンダリングして表示されます。
これでも文字が小さいと感じる場合は前回のエントリの-webkit-text-size-adjust とあわせると良いでしょう。
iPhoneでWebサイトを表示した場合の文字サイズの調整
iPhoneのsafariではWebサイトを最適に表示するために文字サイズを自動調整する機能を持っています。
しかし、携帯向けのサイトと共通のHTMLで表示した場合に予想外にサイズが小さくなり文字が読みづらくなってしまう場合があります。
この場合、-webkit-text-size-adjust という属性を設定し文字サイズの自動調整をOFFまたは倍率固定することで回避できます。
例:
<html style=”-webkit-text-size-adjust:none;”>
↑自動調整をOFFにする
<html style=”-webkit-text-size-adjust:150%;”>
↑文字サイズを1.5倍にする
最近のコメント