CSSとJSを使ってモバイル端末のスタイルの互換性の適当な方案をします

最新更新日時:2020年05月27日15:26:14《 - - 》
本文内容:モバイル端末の異なる機種、異なる設備のスタイル互換性方案のまとめ
モデル
画面幅が高く、物理サイズの画面解像度、物理サイズの画素点数、単位px、window.innerHeightとwindowinnerWidth
-
しんき
ブラウザシミュレータ
ネイティブウィジェットwebview
iPhone 5
-
320*568
-
iPhone 6/7/8
-
375*667
-
iPhone 6/7/8 Plus
-
414*736
414*673
iPhone X
-
375*812
-
iPad Pro
-
-
1024*1290

適合コード

/* iphonex    */
@media only screen and (min-height: 724px) {

}
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

}
/* pad    */
@media only screen and (min-width: 500px) {

}

CSSマルチメディアクエリの使用

iPhone X底部ボタン遮蔽問題

iPhoneシリーズの機種では、底の物理ボタンを外し、横棒のフローティングバーが現れ、底のフローティングボタンのレイアウト時に互換性処理を行い、原生の横棒を避ける必要がある

<style>
.bottombtn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
}
/* iphone X */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .bottombtn {
    padding-bottom: 30px;
  }
}
/* plus */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
  .bottombtn {
    padding-bottom: 30px;
  }
}
/* plus */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
  .bottombtn {
    padding-bottom: 30px;
  }
}
style>

<div class="bottom">div>

JSのuserAgentを使う

if(window.navigator.userAgent.toLowerCase().indexOf('ipad') > -1){
	//  ipad  
	this.state.isPad = true;
}

参考資料

CSS 3マルチメディアクエリ

iPhoneの画面サイズ、解像度、および適切な

読んでくれてありがとう、コメントを歓迎します^-^ ^-^