iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
新しいiOS5のMobile Safariでmeta-viewportのワーニングが出たのでWebKitのソースを読んでみたというお話 - l4l
どんなワーニング？ iOS5(beta)とかChrome 13などで、ふと気付いたら自分が開発しているページでワーニングが出ていた。「widthってkeyに対してdevice-widthなんて値は指定できないんだぜJK」とかそんな感じ。 Viewport argument value "device-width;" for key "width" not recognized. Content ignored. 実際に指定していたviewportは以下な感じ。 <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;"> ちなみにiOS4では出力されてない。はて原因何だろう？という今日の出来事に対するメモ。 結論 metaタグのcon
【速報】iOS5のmobile Safari, CSS対応状況
WWDC 2011 ではジョブズさんも登場して見応えがありました。 iOS 5 の Safari はタブ機能も実装し使いやすく生まれ変わるとのこと、楽しみです。 http://www.apple.com/ios/ios5/features.html#safari Beta SDK もダウンロード可能になり早速インストールして試してくれた方がいるようです。 David B. Calhoun – Developer Blog New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 CSS, JavaScript の対応状況を調べています。 気になるところをつまみ食いです。 position:fixed に対応 バグってい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
