ズーム無効

Silktide は、モバイルデバイスで訪問者がズームインできないようにするコードが各ページにないかチェックします。多くの人がコンテンツを読むためにピンチ操作によるズームに頼っているため、ピンチ操作によるズームは常に利用できるようにする必要があります。

この問題の原因となるコードは、ページのタグです。

<!-- 問題: user-scalable=no と maximum-scale=1 の両方がズームを無効にする -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- 修正: ユーザーがズームできるようにする -->
<meta name="viewport" content="width=device-width, initial-scale=1">

重要な理由

ピンチ操作によるズームは、弱視の人がスマートフォンでウェブを読むための方法です。また、それ以外の人にとっても、小さな文字や情報量の多い地図、細部まで描かれた画像を見やすくするために役立ちます。ズームを無効にしたページでは、これらがすべて不可能になります。訪問者が自分で適用できる回避策はありません。

ズームは通常、レイアウトがずれるのを防ぐなど、見た目上の理由で無効にされます。その代償を全面的に負うのは、この機能を最も必要としている人々です。また、アクセシビリティのガイドラインでは、テキストのサイズを変更できることが求められています。ズームを無効にすると大きな悪影響が生じるため、現在ではこの制限を無視するデバイスもありますが、多くのブラウザーは依然としてこの制限に従います。

修正方法

すべての viewport タグから user-scalable=no を削除します。
ズーム倍率をページの通常のサイズ、またはそれに近いサイズに制限する maximum-scale の値を削除します（maximum-scale=1 など）。
ズームするとレイアウトが崩れる場合は、訪問者をズームから締め出すのではなく、でレイアウトを修正します。

Silktide によるテスト方法

シミュレートされたモバイルデバイスでページを読み込みます。
すべての viewport の meta タグを探します。
ズームを無効にする各タグを報告します。対象となるのは、user-scalable=no を含むタグ、またはページの読み込み時の倍率以下の maximum-scale を指定しているタグです。

トラブルシューティング

iPhone ではまだズームできます

iOS はこれらの viewport の制限を無視し、ピンチ操作によるズームを許可します。それでも、他のブラウザーやプラットフォームではこの制限が適用されるため、このコードは実際の障壁となり、修正する必要があります。この問題を再現するには、Android デバイスでテストしてください。

タグがフレームワークやテーマによって追加されます

一部の古いテーマやアプリフレームワークでは、デフォルトで user-scalable=no が挿入されます。テーマ内で viewport やズームの設定を探すか、ページテンプレートでこのタグを上書きしてください。