媒体查询iphone6、iphone6 plus，js判断设备型号

最新推荐文章于 2021-07-22 18:49:04 发布

转载最新推荐文章于 2021-07-22 18:49:04 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhongfufen/p/4580213.html

本文介绍了如何使用CSS和JavaScript来判断设备的屏幕方向（横屏或竖屏），并提供了具体的代码实现。对于不同的设备尺寸，如iPhone的不同型号，文章详细展示了如何调整样式以适应这些不同的屏幕尺寸。

/* 兼容问题*/
@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/zhongfufen/p/4580213.html