高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
![これからはこの実装がオススメ! iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/eba876af5e01e352eb1e9b047aac9ace5020bff5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202103%2F2021081501%402x.png)
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
【HTML5】iOSのSafariでvideoタグ埋め込みのmp4が再生できないのはインターレースだから 2018 10/06 音声付き自動再生でなければ、mp4をvideoタグで設置して問題ない 主流のブラウザについてはH.264のmp4をvideoタグで設置することには何も問題ないはずです。 Can I Use 音声アリの自動再生については、特にモバイル環境では以前からできないかと思いますが、再生ボタンをちゃんと押せばOKのはずです。 まずはこれを確認 <video>要素にplaysinline属性を記述しているでしょうか? <video autoplay loop muted poster="poster.jpg" playsinline> <source src="video.mp4"> </video> なかったら、とりあえずつけてみましょう。再生できるかも……! 参考:iOS1
スクロールすると次のコンテンツへとつないでいき、商品やプロダクトなどを印象的にみせてくれる、1ページで完結するタイプのサイトを作成するときに参考にしたいパララックスやフリップ型などのjQuery Pluginを集めました。 1ページスクロールがつくれる jQuery Plugin特集【One Page Scroll】is a post from:InfinityScope 投稿全文を表示する - View All Content Follow Me : FaceBook Page InfinityScope 関連オススメ記事モバイルメニューを実装する多機能 jQuery plugin『mmenu』ページを縦横斜めに、滑らかにスクロールすることが出来るJS,jQueryプラグインから4選「Masonry」のようなPinterest風デザインを実装できる jQuery pluginをいくつかリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く