position: fixed;とiPhoneのピンチアウト

このブログのサイトヘッダーはposition: fixed;で固定配置しており、幅は640pxです。

通常はコレで問題ないのですが、iPhoneでピンチアウトした際に、ウィンドウからはみ出す右側がスクロールしても見えない状態になってしまいます。

そこで、今回はみえているサイズが640pxを下回った場合にposition: fixed;をposition: absolute;にすることで解決することにしました。

まず最初にmedia queriesを試してみたのですが、media queriesによる幅判定はドキュメントのサイズによって判定されるようで、ピンチアウトの拡大に対する判定はできないようです。

最終的に、jQuery(JavaScript)でリサイズしたときに幅を判定することにしました。この時、判定に利用するのはwindow.innerWidthです。

$(window).width(), $(window).innerWidth()ではドキュメントのサイズが取得されてしまうため、この件には使えませんでした。

OS X版Chromeで試した場合は、window.innerWidthと$(window).width(), $(window).innerWidth()は同じ値になります。