DN*BLOG

2008.8.1

iPhoneサイトを作ってみた。

そして、はまった。

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

通常時の表示サイズ

iPhoneサイト、文字サイズ

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

iPhoneサイト、文字サイズ02

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

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

ちなみに、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

FavoriteLoadingAdd to favorites

Category : (x)HTML , CSS , font , iPhone , Safari , Web Design

関連する記事