Archive for category HTML

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

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

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

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

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

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

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

Posted by tanaka in HTML, tips, スマートフォン 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倍にする

Posted by tanaka in HTML, tips on 2009 年 3 月 27 日

弊社のサービス「のみテレ」に幹事サポート機能を追加したので、社内のお花見告知に早速使用してみたのですが・・・

特定のメーラーで文字化けが発生するという報告がありました。

基本はモバイル向けですので、モバイル端末では問題ないのを確認していたのですが、PCではOutlook系のメーラーにてサブジェクト、本文ともに文字化けしていました。

調べてみるとどうやらUTF-8のページにUTF-8向けにURLエンコードしたmailtoリンクを設置すると文字化けする模様。

サンプル
shift_jis

shift_jis向けにURLエンコードした場合では正常に表示されたのでこちらで問題ないと思いきや・・・

今度はThunberbirdで文字化け発生です。

どうやら「文字化けする場合はこちら」という形でリンクを併記するしかなさそうです。

ちなみにMacの場合は逆にURLエンコードしない方が文字化けしないという情報もありましたので、JavaScriptからOSを判定する必要があるかもしれません。

静的なリンクにはなりませんが、mailtoはSEOも関係ないので問題ないでしょう。

infoalive labs