iphoneXソリューションと互換性のあるUIWebview

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 ;}

    

}

 

おすすめ

転載: blog.csdn.net/handsome0916/article/details/90740673