Mobile Safariでの100vhが気に入らないからPostCSSで解決した
CSSのvhとかのviewport unitsって画面ぴったりな要素や画面サイズに合わせた要素が簡単に作れて便利ですよね。
しかし残念ながらvhはMobile Safariだとぴったりいかない場合があります。
これはアドレスバーの高さを計算に入れる入れないの問題に起因しているようです。
色々な解決策
Mobile Safariで100vhを画面ぴったりにしたい場合、Stack Overflowには色々な解決策があります。
Stack Overflow - How to fix vh(viewport unit) css in mobile Safari?
Viewport Units Buggyfill使う
ちゃんと試せてないけど、実行時にvh単位の値を上書きするCSSを付与する様子。-
jQueryで対応する
$('.my-element').height(window.innerHeight + 'px'); -
JavaScriptで対応する
document.getElementById("my-element").style.height = window.innerHeight + 'px'; height: 100%引き回す
古き良き方法。-
CSS カスタムプロパティで対応する
.my-element { height: 100vh; /* Fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 100); }// First we get the viewport height and we multiple it by 1% to get a value for a vh unit let vh = window.innerHeight * 0.01; // Then we set the value in the --vh custom property to the root of the document document.documentElement.style.setProperty('--vh', `${vh}px`);
で、最後のCSS-Tricksの解決策が個人的にいいなーと思ったのですが、100vh書いたところ全部にcalc(var(--vh, 1vh) * 100);って書いていくのめんどくさいなー。PostCSSでなんとかなるんじゃないかなー。というのがこの先の解決策です。
CSS-Tricks - The trick to viewport units on mobileをPostCSSで実施する
PostCSSプラグインを作る
ローカルに自作のPostCSSプラグインを作ります。
const postcss = require('postcss')
// プラグイン定義
module.exports = postcss.plugin('postcss-viewport-units-on-mobile', () =>
createPlugin()
)
function createPlugin() {
return root => {
const replaces = []
// CSSの宣言（declaration）を走査
root.walkDecls(decl => {
// vh,vmax,vminの単位で宣言した値を書き換えたCSS値を作る
const newValue = decl.value.replace(
/\b([-+]?[\d.]+)(vh|vmax|vmin)\b/g,
replacer
)
if (decl.value !== newValue) {
// vh,vmax,vminが書き換えられていたら、そのCSSを保持しておく
replaces.push({ decl, newValue })
}
})
// vh,vmax,vminが書き換えられたCSSの宣言を元のCSSの宣言の後ろに挿入していく
for (const { decl, newValue } of replaces) {
decl.parent.insertAfter(decl, decl.clone({ value: newValue }))
}
}
}
// vh,vmax,vminの書き換え
function replacer(original, snum, unit) {
if (isNaN(snum)) {
return original
}
const num = snum - 0
return `calc(${snum} * var(--${unit}, 1${unit}))`
}
このPostCSSプラグインはvhを使った単位を見つけたら、その下にCSS カスタムプロパティで書き換えたCSSを付与します。
つまり、このCSSは
.a {
height: 100vh;
}
.b {
height: calc(100vh - 10px);
}
こうなります。
.a {
height: 100vh;
height: calc(100 * var(--vh, 1vh));
}
.b {
height: calc(100vh - 10px);
height: calc(calc(100 * var(--vh, 1vh)) - 10px);
}
PostCSSの処理に入れる
PostCSSの使い方次第なので、これだ！っていうのを1つ書くのはできませんが、
postcss.config.jsに書く形だとこうですかね。
module.exports = {
plugins: [
// ...
// require('autoprefixer'),
// ...
require('./path/to/postcss-viewport-units-on-mobile.js')(), // 作ったプラグイン
// ...
]
}
アプリケーションにJavaScriptを埋め込む
次のJavaScriptをアプリケーションに埋め込みます。
updateViewport()
window.addEventListener('resize', updateViewport)
function updateViewport() {
const vh = window.innerHeight / 100
const vw = window.innerWidth / 100
const root = document.documentElement
// 各カスタムプロパティに`window.innerHeight / 100`,`window.innerWidth / 100`の値をセット
root.style.setProperty('--vh', `${vh}px`)
if (vh > vw) {
root.style.setProperty('--vmax', `${vh}px`)
root.style.setProperty('--vmin', `${vw}px`)
} else {
root.style.setProperty('--vmax', `${vw}px`)
root.style.setProperty('--vmin', `${vh}px`)
}
}
実行結果
記述したCSS
.my-element {
height: 100vh;
}
は、次のように変換され、
.my-element {
height: 100vh;
height: calc(100 * var(--vh, 1vh));
}
JavaScriptで、CSSカスタムプロパティ--vhにwindow.innerHeight / 100をセットすると、
.my-elementの高さがwindow.innerHeightと同じ高さになり、Mobile Safariでもいい感じに画面に収まります！
まとめ
CSSを自分で書き換えなくても、CSS-Tricks - The trick to viewport units on mobileのトリックが使えます。そうPostCSSならね。
Author And Source
この問題について(Mobile Safariでの100vhが気に入らないからPostCSSで解決した), 我々は、より多くの情報をここで見つけました https://qiita.com/ota-meshi/items/0738f2089009b150134c著者帰属：元の著者の情報は、元の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 .