iOSで100vhが効かない問題で、楽な方法をNuxt.jsでやってみる
iOS safariで100vhがうまくいかない時に、
window.innerHeight
を取って各要素のstyle属性に一個一個付ける、
というのをやりがちでしたが、楽な方法が無いかと探すとカスタムプロパティが使えるそうなので、
その手順をNuxt.js版で書きます。
mixinを作る
--wh
という名前でカスタムプロパティを定義する。
ロード時と、リサイズ時にwindow.innerHeight
を取って--wh
に入れる。
export default {
data: () => ({
style: {
'--wh': '100vh'
}
}),
mounted() {
this.$nextTick(() => {
this.getWindowSize()
window.addEventListener('resize', this.getWindowSize)
})
},
methods: {
getWindowSize() {
this.style['--wh'] = `${window.innerHeight}px`
}
}
}
mixinを読み込む
mixinを読み込んで、styleオブジェクトをwrapper要素のstyle属性に入れる。
<template lang="pug">
.l-wrap(:style="style")
nuxt
</template>
<script>
import deviceMixin from '~/mixins/device'
export default {
mixins: [deviceMixin]
}
</script>
カスタムプロパティを使う
heightにvar(--wh, 100vh)
と書いて、使用する。
書き方: var(設定したカスタムプロパティ名, プロパティが無い時用の初期値)
<template lang="pug">
.p-top
</template>
<script>
export default {}
</script>
<style lang="stylus" scoped>
.p-top
height var(--wh, 100vh)
</style>
まとめ
これで、iOSのツールバーを考慮した実装が
- wrapperで
window.innerHeight
取って、変数に格納する - wrapperかそれ以下の小要素で
height var(--wh, 100vh)
する
という形でほぼCSSで指定出来るようになりました。
IEはまだ未検証ですが、Nuxt.jsの場合はheight var(--wh, 100vh)
とすると、
height 100vh
を自動的に手前に追加してくれるようなので、
varが認識されなくても問題なくvhできるかと思います。
<style lang="stylus" scoped>
.p-top
height 100vh
height var(--wh, 100vh)
</style>
※mixinを使ったのはlayoutsが複数あるときに、各所に同じ処理を入れることになりそうで面倒だと思ったからなので、default.vueでmixinでやってる処理をそのまま書いても問題ないです。
※実際に使うときはモーダルとかのfixed系要素じゃ無い要素に使うと、iPhoneのスクロール時にがくがく高さ変わるので、リサイズが横幅のリサイズであることを判定することを検討してください。
Author And Source
この問題について(iOSで100vhが効かない問題で、楽な方法をNuxt.jsでやってみる), 我々は、より多くの情報をここで見つけました https://qiita.com/oblivion/items/58d7e9fa22db2442dffa著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .