iPhoneサイトで拡大率を固定するべくviewport設定を見直す

iPhoneサイトを構築する際のviewport設定について、以前に記事を書きました。
スマートフォンの画面サイズとフォントサイズ
今回、この設定で構築したサイトで１つ問題が発生しました。

iPhoneのブラウザでサイトを閲覧したときに、横にスクロールしてしまうという問題です。

言葉だけではうまく説明できないので、以下に図を示します。

※図はダミーです。Yahooさんのサイトで実際にはこうなりません。

画像の通り、厳密には横スクロールではありません。横スクロールバーは発生していないのですが、フリック、つまり指で画面を横方向になでると、びよーんと横に引っ張られるような動きをするのです。その際に、裏のグレーの背景が見えて、指を離すとばねに引っ張られるように元に戻ります。

指の動きというのは精密ではありませんから、縦にスクロールする際に、若干の横移動を検出して横にブレてしまいます。使用感としては、あまり気持ちが良いものではありませんね。

ちなみにAndroidでは再現しません。
いろいろと調べた結果、iPhoneの独自設定項目であるviewportに原因がありました。

以下、これまで最適だと思っていたviewportの設定です。

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
maximum-scale=1.0, minimum-scale=1.0" />

これは、サイトは既に最適なサイズで構築してあるので、ピンチでの拡大、縮小を許可しない設定です。
「maximum-scale」と「minimum-scale」が1、つまり最大拡大率と最少拡大率が等倍という設定なので、結果的に拡大と縮小の操作はできません。
しかし、この設定では今回の図のような問題が発生することが発覚しました。

問題を解消するべく、試行錯誤の結果、「minimum-scale」を外して以下の設定にすると横に動かなくなりました。

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
maximum-scale=1.0, user-scalable=no" />

「minimum-scale=1.0」を、拡縮操作を禁止にする「user-scalable=no」に置き換えました。また、「maximum-scale=1.0」を削ってしまうと、画面を横にしたときにコンテンツが拡大されてしまったので、これは残しておきます。

これでひとまず、標準的な設定といえるのではないでしょうか。

viewportの設定は、それぞれの項目は理解しているつもりですが、感覚的な要素が大きいので実機で実際に触ってみるのが重要だと感じました。