スマホで見た時にファーストビューの高さがうまく取れなくて困っています。
現在あるサイトを作っており、ファーストビューでメインビジュアルが縦横100%になるパララックスサイトを制作しています。
ほとんど完成しているのですが、スマートフォンでファーストビューでみると初期表示でデフォルトでスマートフォンの検索メニューバーなどが出ている影響か、
高さがうまく取れずロゴが上下左右中央にきていません。
実際に下にスクロールしてデフォルトのスマートフォンの検索メニューバーなどが縮小した状態で、
ロゴを押してトップにスムーススクロールでトップに戻るとファーストビューでロゴが上下左右中央にきているのがわかります。
この状態をファーストビューでも再現したいのですが、ここで詰まってしまいわからないでおります。
テストサイトのURLを載せますので、どなたか直す方法を教えていただけないでしょうか。
心優しい方のご協力何卒宜しくお願い致します。
テストサイト
こちらでは解決に至らなかったので、URLは削除させていただきました。ご協力ありがとうございました。
関係しているjs/css
jquery.bgswitcher.js
style.css
参考画像(初期表示時)
解決に至らなかったので、参考画像は削除しました。
参考画像(検索メニューなどが縮小した時)
解決に至らなかったので、参考画像は削除しました。
// 対象htmlコード <div id="top" class="wrapper"> <div id="mainvisual" style=""> <h1><a href="./"><img src="assets/images/logo-big.png" alt="TIMELESS"></a></h1> </div> <!-- #mainvisual --> </div>
// 対象css html { height: 100%; } .wrapper { overflow: hidden; position: relative; margin: 0 auto; padding: 0; } #mainvisual { width: 100%; height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #fff; position: fixed; overflow: hidden; top:0 !important; z-index:0 !important; } #mainvisual h1 { width: 30.4%; max-width: 228px; cursor: pointer; }
// 対象js(jquery.bgswitcher.js) jsのソースが載せきれないので、リンクを追記しておきます。。 http://37854bc53656a874.main.jp/test/timeless/assets/js/jquery.bgswitcher.js ID: test PW: test
回答2件
あなたの回答
tips
プレビュー