Archive for category スマートフォン

Posted by uchida in スマートフォン on 2011年1月12日

明けましておめでとうございます、そして初めまして

ソリューション事業部の内田です、新年から色々忙しいですが頑張っていきます！

さて、今回スマートフォン用サイトをいじる機会があったのでそこで知らなかった知識を

１つ紹介したいと思います。

スマートフォン用サイトを作る際の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の一覧です、今年はさらにスマートフォンが活性化してくるようなので

こういったことを学ぶ機会は多くなってきそうだなと思います。

Posted by admin in tips, XHTML, スマートフォン on 2010年7月22日

先日のiPhone自動文字縮小について記述しましたが、今回iPhone向けサイトを構築していて、シミュレータなどと比較すると非常に画像サイズが小さく、縮小されて表示されてしまうという現象となりました。

どうも、iPhoneはデフォルト横幅960pixとしてレンダリングし、それをiPhoneの解像度にあわせて縮小表示するようです。

これを実際のpixelにあわせて表示させるためにはmetaタグにて viewportの指定を行う必要があります。

iPhone3 iPhone3GSの解像度ぴったりにあわせる場合には

と指定することによって、サイトを横幅320pixとしてレンダリングして表示されます。

これでも文字が小さいと感じる場合は前回のエントリの-webkit-text-size-adjust とあわせると良いでしょう。

Posted by admin in tips, XHTML, スマートフォン on 2010年7月8日

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倍にする

infoalive labs