手机浏览器css兼容

最新推荐文章于 2024-08-07 21:00:00 发布

闲来无事垂钓

最新推荐文章于 2024-08-07 21:00:00 发布

阅读量8.7k

点赞数 1

分类专栏： javascript学习笔记

本文链接：https://blog.csdn.net/qq_39109182/article/details/81019977

版权

javascript学习笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

pixel与point比值称为device-pixel-ratio，普通设备都是1，iPhone 4是2，有些Android机型是1.5。]
那么-webkit-min-device-pixel-ratio:2可以用来区分iphone(4/4s/5)和其它的手机
iPhone4/4s的分辨率为640*960 pixels，DPI为是320*480，设备高度为480px
iPhone5的分辨率为640*1136 pixels，DPI依然是320*568，设备高度为568px
iPhone6的分辨率为750*1334 pixels，DPI依然是375*667，设备高度为667px

iPhone6 Plus的分辨率为1242x2208 pixels，DPI依然是414*736，设备高度为736px

方式一，直接写到样式里面

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
    .class{}
}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
    .class{}
}

/* 或者以宽度为准 */
@media all and (max-width:320px){/* 兼容iphone5 */
    .class{}
}

@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
    .class{}
}

@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
    .class{}
}

/* 或者以宽度为准 */
@media all and (min-width:414px){/* 兼容iphone plus */
	.class{}
}

方式二，链接到一个单独的样式表，把下面的代码放在<head>标签里

<link rel="stylesheet" media="(device-height: 480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" />

<link rel="stylesheet" media="(device-height: 568px)and (-webkit-min-device-pixel-ratio:2)" href="iphone5.css" />

<link rel="stylesheet" media="(device-height: 667px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6.css" />

<link rel="stylesheet" media="(device-height: 736px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6p.css" />

方式三，使用JS

//通过高度来判断是否是iPhone 4还是iPhone 5或iPhone 6、iPhone6 Plus

isPhone4inches = (window.screen.height==480);
isPhone5inches = (window.screen.height==568);
isPhone6inches = (window.screen.height==667);
isPhone6pinches = (window.screen.height==736);

iPhone X 适配

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

contain: The viewport should fully contain the web content. 可视窗口完全包含网页内容
cover: The web content should fully cover the viewport. 网页内容完全覆盖可视窗口
auto: The default value, 同contain的作用
通过给页面设置viewport-fit=cover，可以将页面的布局区域延伸到页面顶部和底部，但这样也会有问题
可以在H5页面链接一个iphonex.css来给iPhone X访问的页面增加对应的适配层

@media only screen and (device-width: 375px) and (device-height: 812px) and
(-webkit-device-pixel-ratio: 3) {
    /*增加头部适配层*/
    .has-topbar {
        height: 100%;
        box-sizing: border-box;
        padding-top: 44px;
        &:before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 44px;
            background-color: #000000;
            z-index: 9998;
        }
    }
 
    /*增加底部适配层*/
    .has-bottombar {
        height: 100%;
        box-sizing: border-box;
        padding-bottom: 34px;
        &:after {
            content: '';
            z-index: 9998;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 34px;
            background: #f7f7f8;
        }
    }
 
    /*导航操作栏上移*/
    .bottom-menu-fixed {
        bottom: 34px;
    }
}