iphoneXとの互換性は、実際には非常に単純で、コードは1文だけです。
<
meta
name
=
"viewport"
content
=
"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,viewport-fit=cover,user-scalable=no"
>
注意别少了viewport-fit=cover和user-scalable=no
假如少了viewport-fit=cover会影响iphoneX的兼容性
假如少了user-scalable=no会影响android的键盘的兼容性
このコードは、iphoneXと互換性のあるhtmlタグのheadタグに配置されます。
もちろん、この手順の後、下部は互換性がなければなりません。下部と上部と互換性を持たせる最も簡単な方法は、上部のdivにpadding-topを追加し、下部のdivにpadding-bottomを追加することです。次のように、BananaCloudによってコンパイルされたyeuiフレームワークの互換性のあるコードを参照してください。
@media only screen and(device-width:375 px)and(device-height:812 px)and(-webkit-device-pixel-ratio:3){
.yeui-header { 高さ:84ピクセル;}
.yeui-header .headContent { margin-top:40 px ;}
.yeui-header〜.yeui-content { padding-top:84 px ;}
.yeui-footer { 高さ:60ピクセル;}
.mainMarginBottom { padding-bottom:60 px ;}
.commMarginBottom { padding-bottom:20 px ;}
}
@media only screen and(device-width:414 px)and(device-height:896 px)and(-webkit-device-pixel-ratio:3){
.yeui-header { 高さ:84ピクセル;}
.yeui-header .headContent { margin-top:40 px ;}
.yeui-header〜.yeui-content { padding-top:84 px ;}
.yeui-footer { 高さ:60ピクセル;}
.mainMarginBottom { padding-bottom:60 px ;}
.commMarginBottom { padding-bottom:20 px ;}
}
@media only screen and(device-width:414 px)and(device-height:896 px)and(-webkit-device-pixel-ratio:3){
.yeui-header { 高さ:84ピクセル;}
.yeui-header .headContent { margin-top:40 px ;}
.yeui-header〜.yeui-content { padding-top:84 px ;}
.yeui-footer { 高さ:60ピクセル;}
.mainMarginBottom { padding-bottom:60 px ;}
.commMarginBottom { padding-bottom:20 px ;}
}