ios9 (β) viewportに不具合か!?

ios9 (β) viewportに不具合か!?
■ 店頭より得で、予約しやすいオンラインショップ。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE

今秋リリースが予定されているios9ですが、beta4版を少しいじっていたらおかしな事象を発見したので記事にしました。

# 2015年9月17日13:40 追記 : iOS9(正式版) が公開されましたが、本稿に関する不具合は解消されていませんでした。
# 2015年8月17日11:30 追記 : iOS9 beta5 が公開されましたが、本稿に関する不具合は解消されていませんでした。

テスト環境

iPhone 5S
ios9 beta

やろうとしたこと

前回の記事でも書いたiPadでios9からサポートされるPicture in PictureをなんとかiPhoneでも実装できないかという検証。

あ。予め断っておきますが、Picture in Pictureは残念ながら実装できませんでした・・・orz

問題のソース

ios7.1.2で表示 ios9で表示
image10 image09

明らかに表示に差異があります。
ios7.1.2の表示が、HTMLの解釈としては正しいです。

開発者ツールで見てみる

開発者ツールでを選択している状態の画像ですが、ios9のほうはbodyサイズが小さくなってしまっています。

ios7.1.2で表示 ios9で表示
image14 image11

viewportが効いていない?

viewportは下記のように指定しているため、ピンチインアウトもできないはずです。
が、できてしまいます。

viewportが効いていないようです。
では実際にviewport指定を外してみたらどうでしょうか。

viewportあり viewportなし
image09 image08

だいぶ違いますね。単純にviewportが効いていないだけではないようです。

色々いじってみた結果

javascriptが悪さをしているのか、あるいはviewportの記述方法が間違っているのか、buttonに付与したスタイルが悪いのか・・・

色々試した結果・・・

原因はvideoタグでした。
もっと言うと、videoタグのsrcで指定したmp4ファイルが存在する場合、読込みの過程でviewportに不具合が起こるようです。

srcで指定したmp4が存在しない場合の表示
image06

試しに下記のように時間差でsrcを指定してみたところ、やはり読み込まれた瞬間にviewportがおかしくなりました。

viewportがおかしくなったときに時間差で再定義してみましたが、それでもダメでした。

解決方法

解決策は残念ながら見つかりませんでした。誰か解決策わかる人いたら教えて下さい。。。

スマホではmp4とviewportなんて結構鉄板な組み合わせなので、早めの対応を期待したいですね。

■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE
がお得です。