iphone手机不同版本兼容、横竖屏

时间:2022-01-27 19:58:26
/* 兼容问题*/

@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){
  .dialog-agreement-con{
    height: 45%;  /* iphone4*/
  }
}
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
  .dialog-agreement-con{
    height: 55%;  /* iphone5*/
  }
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
  .dialog-agreement-con{
    height: 60%;  /* iphone6竖屏*/
  }
}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
  .dialog-agreement-con{
    height: 60%;  /* iphone6 plus竖屏*/
  }
}
.dialog-agreement-con{
overflow-y:scroll;
margin-bottom: 2rem;
} CSS判断横屏竖屏 @media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
} JS判断横屏竖屏 //判断手机横竖屏状态:
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
  if (window.orientation === 180 || window.orientation === 0) {
    alert('竖屏状态!');
  }
  if (window.orientation === 90 || window.orientation === -90 ){
    alert('横屏状态!');
  }
}, false); //移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。 // 横屏监听
var updateOrientation = function(){
  if(window.orientation=='-90' || window.orientation=='90'){
    $('.landscape-wrap').removeClass('hide');
    console.log('为了更好的体验,请将手机/平板竖过来!');
  }else{
    $('.landscape-wrap').addClass('hide');
    console.log('竖屏状态');
  }
};
window.onorientationchange = updateOrientation;