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

最新推荐文章于 2023-12-16 17:32:04 发布

转载最新推荐文章于 2023-12-16 17:32:04 发布 · 120 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qhorse/p/5104575.html

本文探讨了在不同手机屏幕尺寸下，通过CSS媒体查询实现网页布局的自适应调整，确保用户体验不受屏幕大小限制。具体展示了针对iPhone4、iPhone5、iPhone6及iPhone6plus等常见机型的布局优化方法，包括高度调整、滚动条设置以及横竖屏状态的判断与响应式设计。同时，介绍了JavaScript用于实时检测设备横竖屏状态，以便在适当情况下提示用户调整手机方向以获得最佳浏览体验。

/* 兼容问题*/


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

转载于:https://www.cnblogs.com/qhorse/p/5104575.html