DN*blog

そして、はまった。

表示、コンタクトフォームからのメール送信。文字化け。
この辺のことは問題なかったんですけど、iPhoneを傾けたときに一部の文字が拡大されるんだけど、傾きを元に戻したときに一部の文字が拡大したまま戻らない。
と言う現象にはまっています・・・。

通常時の表示サイズ

そして、傾けて戻したときの文字サイズ

上記の二枚の画像を比べてもらえるとわかりますが、大きくなってしまいます。
なぜか、左の日付の文字はかわらないんですけど・・・・。

半角だからか？って思ったら他の半角の文字も拡大されたまま戻ってないし。
ますますワカラナイ！！！

ちなみに、metaの設定はコチラ。

<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0" />

表示サイズは320pxに固定。
拡大率は2倍
デフォルトの表示率は1倍
ユーザーが拡大出来る最大値は2倍

こんな感じです。

CSSのfont-familyの設定が悪いのか・・・。
文字サイズの設定が悪いのか。。。

ちょっと色々検証をしないといけないですね。

でも、ブラウザがSafariなんでprototype.jsとか使えて便利ですね。
PHPのメールフォームも問題ないし。

普通のブラウザだし、当たり前か・・・。

viewportの設定に関しては詳しく下記のサイトに掲載されていますのでそちらをご覧下さい。
参考サイト様
ProjectDD Blog - iPhone / iPod touch 向けのmeta要素 viewport

なんか気になったので。

ちなみに、CSSでのフォントの指定は、

font-family:Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ ゴシック","MS PGothic",sans-serif;

ヒラギノがあたってます。
以下の画像がブラウザごとの見え方です。

IE6での表示

Firefoxでの表示

Safariでの表示

Operaでの表示

うーん。
Firefoxがきたないですね。
Safariがきれいにアンチエイリアスがかかってる気がします。
で、IEとOperaは読みやすい。

当ててる、フォントがだめだと思うんですけど。
日本語フォントの選択って難しいですよね。

文字や数字の省略と所有格を示す時に使われます。
「shift+7」で入力しちゃうと思いますが、これは間違いで正しいアポストロフィーは、
「shift+alt+[」で、でます。

「shift+7」の場合。It’s Tom’s book

「shift+alt+[」の場合。It’s Tom’s book

フォントサイズが小さいのでわかりづらいかもしれませんが、Fireworks等のアプリを使って検証してみると違いがわかります。

大きくするとこの違いです。
普段気兼ねなく使ってしまいそうな「shift+7」はフィートやインチの時だけに使われます。ただし、その際にそのまま使うのではなくイタリック体にして使用するのが正しい使い方みたいです。

ちなみに、上の画像の赤丸で囲ってあるアポストロフィーの逆のやつは、「alt+[」で、出ます。

こういう、細かいところにもちゃんと気を使い正しい使い方をするのが大事ですよね。