iPhoneのsafariで表示中のWebページの向きを横に変えると、解像度が拡大してしまう件

現在開発中のアプリをiPhoneで表示させる時にハマったんで備忘録。

iPhoneのsafariで表示中のWebページの向きを横に変えると、解像度が変わって画面が拡大してしまう（ように見える）。
どうやらこれはsafariのバグらしいんだけど、みなさん混乱していらっしゃるようで対応策がマチマチ。
書いてあるように対応しても、うまくいかなかったりしたり。
バージョン違いのせいかな？
情報が溢れてると、逆に正しい情報を見つけるのに苦労する。
と、言うわけで更に情報を増やしてみたりw

 
さて、本題。

 
Bootstrapには、元々上記の問題のための対応が入っているらしく、
サンプルソースに以下の記述がなされている。

 
[code lang=”html”]
<meta name="viewport" content="width=device-width, initial-scale=1.0">
[/code]

 
ところが、これだけだとうまくいかない。
上記の対応をすればいいよ。と、書かれているサイトも多く、なぜうまくいかないのか悩む事1時間。
似たような記事を読み漁っていると、こんな事が書かれているサイトが！！

またmaximum-scaleを指定しないと、widthを指定しても有効にならないっぽいです。

 
何っ！？widthが有効にならない？

 
と、言う事で「maximum-scale=1.0」を追加したトコロ、無事に拡大されなくなりました。
なお、最終的なviewportの指定はこちら。

 
[code lang=”html”]
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
[/code]

 
ちなみに、各設定値の説明はコチラ。