風が心地よい季節、朝晩は少し寒かったりするのでTシャツに上着をはおりました。
まだ半ズボンだけど。

iOS 7登場して数週間。
iPhone 5S, 5Cを既に手にした人も多いかと…

新しくなった mobile Safari ちょっと気になったことを書き留めておく。

URLバーは消せない

やっぱりと言うかそんな気がしてた。
Memo, iOS, Androidブラウザのアドレスバーを消す方法
でやってた window onload で scrollTo しても消えない。

setTimeout(scrollTo( 0, 1), 0);
// or
setTimeout(scrollBy( 0, 1), 0);

mobile Chrome と同じような仕様に変わちゃった。
Android ChromeのURL barは消せないと知った絶望感
＊requestFullscreenを使う方法もあるようなので、追記してます。通常の閲覧でフルスクリーンをユーザーにしいるのはかなりアレなので使うことはないと思いますけど。videoとかだったらアリでしょうけど。

URLバーって書いたけどAppleの呼称は URL text field です。
Safari Web Content Guide
これの iOS 7 版ってどこだろう。

Chrome と違うのはスクロールダウンするとサイズが小さくなることと、併せてButton barも消えること。

ただし、bodyタグにoverflow:hiddenを設定するとURL text fieldが小さくなったりButton barが消えたりはしなくなります。
Appleの5c, 5sのサイトをiOS 7 Safariで見ると確認できます。
http://www.apple.com/jp/iphone-5c/

スクロールで何かしたい（流行のパララックスぽいの）時に任意のタイミングでviewのサイズが変わるのは何かと大変そう。
という独り言です。

もろもろまとめて下さってる方がいます。
Safari on iOS 7 and HTML5: problems, changes and new APIs

そうそう、canvasでthree.jsの破線も表示できるようになってました。
FxUG@Fukuoka 「three.jsはじめましょ」LT資料を公開しました
点と線 + 線を点線 + 点アニメーション（点のスケール）
点と線 + 線を点線 + 点アニメーション（点のスケール + 点線のdashとgap）

【追記】
iOS Safari だと standalone mode で　URL text field(URLバー) と Button bar は meta tag 設定で消すことは可能です。
Memo, [iOS][mobile Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定
[iOS 6][iOS 7] mobile Safariのstandalone modeでフルスクリーンにするviewport設定

【おまけ】
どうでもいいことだけど…
CSSで背景色と背景画像の色を変えると URL text field に色がつけられます。
iOS 7 mobile SafariのURLバー背景色を設定するCSS

update 2014-01-06
ネイティブWebViewだとstatus barはどうにかできるらしい。
Everything Hybrid Web Apps Need to Know About the Status Bar in iOS7

記事中に有料ライブラリKendo UI Mobileは対応してるとの情報。
iOS 7 Support for Kendo UI Mobile Available Today!
Mobile demosを見る限りstandalone mode（フルスクリーン）の時に対応しているだけの様子。

う〜〜ん、なかなかムズい。

update 2014-01-07

iOS 7.1だと消せるらしい

<meta name="viewport" content="minimal-ui">

viewportへminimal-uiが追加になるそうな。

AskDifferent: Is it possible to hide the address bar and status bar in iOS 7 Safari?
StackOverflow: Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
whirlpool: iOS 7.1 Beta 2 (11D5115d) Released
bgr.com: Apple releases iOS 7.1 beta 2

探すと色々出てきた…
これは公開してもOKな情報なんだよね。

iOS 7.1 で minimal-ui を設定すると
URL text field は tint style（細い状態）になり
Button bar は非表示になるそうです。

ということで記事タイトル加筆しました。

update 2014-09-12

iOS 8はminimal-uiをサポートしない

iPhone 6, どっちを予約しようか悩む今日この頃、
iOS 8はminimal-uiをサポートしないそうな。

iOS 8 Release Notes

The minimal-ui viewport property is no longer supported in iOS 8.

う〜〜ん、どうしよう。

【追記】
stackoverflow: iOS 8 removed “minimal-ui” viewport property, are there other “soft fullscreen” solutions?
まんまなスレッド見つけました。

回答もあるけど微妙だなぁ。

こうなると
tint styleにしたりButton barを非表示にするのはNGだよってのがAppleのメッセージなんやね。

だったらなんで minimal-ui 登場させたんだよ。
ブツブツ