iPhoneサファリの自動ズーム

Question

Mobile Safariが携帯電話向けのサイトを認識し、自動的にズームインする方法はありますか？他の携帯電話やブラウザではどのように機能しますか？

user_agentを見て、モバイルブラウザごとに異なるページを送信しないようにします。

Answer 1

ビューポートの構成部分。

Answer 2

ボディまたはメインラッパーのdivの高さを100％に設定している場合、モバイルブラウザーでズーム/レンダリングする距離が混乱することがあります。モバイルサファリとAndroidのクロムブラウザーでこれを確認しました。 #siteWrapperの高さを100％からautoに設定すると、はるかに良いスケールでレンダリングされます。

（メインラッパーの高さ100％は、多くの場合、スティッキーフッターで使用されます。）

Answer 3

サイトはモバイルブラウザを認識し、それに応じて出力を生成できます。これは通常、望ましい方法です。

Safariは幅とズームを合わせて検出しますが、それを超えて...

Answer 4

条件付きCSSを使用することにより、ユーザーエージェントに基づいて異なるページを持つことを回避できます。 Appleは実際に、デスクトップブラウザーと共にiPhoneでSafariをサポートできるWebページの作成に関する非常に優れたドキュメントをいくつか持っています。

WebアプリケーションのiPhoneヒューマンインターフェイスガイドライン。これにより、条件付きCSSを使用して、ユーザーエージェントではなく、デバイスの特性（画面サイズなど）に基づいてページをカスタマイズできます。