1. horikeso

    No comment

    horikeso
Changes in body
Source | HTML | Preview
@@ -1,25 +1,30 @@
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/)にたどり着きました。
+ちょうどブラウザのアドレスバーくらいのずれている気がしたので調べてみたところ`カスタムプロパティ`を使用した[The trick to viewport units on mobile](https://css-tricks.com/the-trick-to-viewport-units-on-mobile/)にたどり着きました。
+
+[CSS のカスタムプロパティ (変数) の利用](https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variables)
+[カスタムプロパティ (--*): CSS 変数](https://developer.mozilla.org/ja/docs/Web/CSS/--*)
+
```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
+/* カスタムプロパティ未対応ブラウザ対応 */
+height: 100vh;
/* 100vh --vhが未定義の場合は1vhを使う */
height: calc(var(--vh, 1vh) * 100);
```
とりあえずPCと自分のandroid端末では問題なく動作しました。