1. horikeso

    Posted

    horikeso
Changes in title
+vhを使う際にはアドレスバーに注意
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,25 @@
+Google Chromeのモバイル版で`vh`が思い通りに使うことが出来なくて調べました。
+
+**`vh`ではなく`%`で対応できるのであれば`%`を使った方がこういう問題が起きないので楽です。**
+
+webページをPCで開発していると問題なかったのですが、自分のスマホ端末で確認すると予定位置とずれて要素が表示されてしまい、困りました。
+
+ちょうどブラウザのアドレスバーくらいのずれている気がしたので調べてみたところ[カスタムプロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variables)を使用した[The trick to viewport units on mobile](https://css-tricks.com/the-trick-to-viewport-units-on-mobile/)にたどり着きました。
+
+```js:js
+// --vhというカスタムプロパティを作成
+let vh = window.innerHeight * 0.01;
+document.documentElement.style.setProperty('--vh', `${vh}px`);
+// window resize
+window.addEventListener('resize', () => {
+ vh = window.innerHeight * 0.01;
+ document.documentElement.style.setProperty('--vh', `${vh}px`);
+});
+```
+
+```css:css
+/* 100vh --vhが未定義の場合は1vhを使う */
+height: calc(var(--vh, 1vh) * 100);
+```
+
+とりあえずPCと自分のandroid端末では問題なく動作しました。