拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする

iOSのSafariには、
フォーム要素へフォーカスするとページ全体が拡大され、入力が終わっても拡大されたままという
ありがた迷惑な独自仕様があります。
(ダブルタップやピンチインすると元の倍率に戻せますが、毎回なので煩わしい…)

以前、この現象を回避する方法として
viewportでページを拡大できないようにして、フォーカス時に拡大しないようにする方法を紹介したのですが

ピンチイン(アウト)での拡大縮小は許可したまま
iPhone(iPad)でフォームにforcusしたときズームしないようにする方法もありました!

サンプル
※iPhoneでひらくと動作を確認できます

“拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする” の続きを読む

iPhoneでフォームにforcusしたときズームしないようにする

フォーカスするとページ全体が拡大される

iPhoneでフォーム要素にフォーカスすると画面が拡大されるあの効果。
入力時に画面が拡大表示され、入力が終わっても拡大状態がキープされているあの効果。

スマートフォンでパソコン用のウェブサイトを見ているときは、次のフォーム要素を押しやすくていいのですが
「大きい文字」「大きいボタン」のちょうどいいデザインで拡大されると、これが煩わしい!
スマートフォン最適化するときは、解除したいところです。

“iPhoneでフォームにforcusしたときズームしないようにする” の続きを読む

viewportでパソコン用のウェブサイトをiPad対応

iPadを回転させても画面にフィットさせる

PC用のウェブサイトをiPadでタテ表示にしたときも横表示にしたときも画面内に収める方法。
このメタタグでviewportのwidthを1024に固定するとちょうど良く調整できます。

<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=0">

initial-scaleで初期倍率を指定した状態だと、回転させた時スクロールが出たり、縮小し過ぎたりとハマったので
最初からinitial-scaleは省いておくのがポイント。

もちろん、元になるウェブサイトの幅が1024px以内に収まっているのが大前提です。