css媒体查询适配iphoneX,iPhone5，HUAWEI P40，ipad

最新推荐文章于 2025-03-05 18:21:41 发布

音乐宇

最新推荐文章于 2025-03-05 18:21:41 发布

阅读量1k

点赞数

分类专栏：移动端文章标签： css html

本文链接：https://blog.csdn.net/yinyueyu007/article/details/117463147

版权

移动端专栏收录该内容

2 篇文章

订阅专栏

/*
1.max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。
2.max-width是目标显示区域的宽度，例如，浏览器宽度。
3.它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/设备独立像素
*/

/* 判断ipad */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
    header{
        height: 140px;
        background: rgba(255, 255, 255, 1);
    }
    .Header-content {
        display: none;
    }
    .Header-content-mobile {
        display: block;
    }
}
/* ipad横屏 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
    /* style */
}
/* ipad竖屏 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
    /* style */
}
/* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px){
    header{
        height: 140px;
        background: rgba(255, 255, 255, 1);
    }
    .Header-content {
        display: none;
    }
    .Header-content-mobile {
        display: block;
    }
    /* style */
}
/* iPhoneX、iPhoneXS*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {}

/* iPhoneXR iPhone11*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {}

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

/* iPhoneXSMax*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {}

/* HUAWEI P40*/
@media only screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3) {}

/* HUAWEI HONOR V30*/
@media only screen and (device-width: 360px) and (device-height: 800px) and (-webkit-device-pixel-ratio: 3) {}