当iPhone为8时，iPhone的媒体查询加载iPhone 10的css
当iPhone为8时，iPhone的媒体查询加载iPhone 10的css
提问于 2018-08-17 02:01:28
我有一堆为各种iPhones编写的css media查询，然而，代码却一团糟。iPhone 10的iPhone load css是8，虽然它是一个iPhone，但我认为这与最大屏幕尺寸部分相互重叠有关。有什么好的解决方案来解决这个问题吗？例如，为特定的手机使用提取屏幕尺寸？
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
<style>
body{
margin:0px;
padding:0px;
background-color:green;
}
header{
height:100vh;
border-bottom:1px solid black;
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
header{
background-color:red;
height:calc(100vh - 57px);
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
.iphone6{
display:block;
}
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
header{
background-color:blue;
height:calc(100vh);
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
.iphone6{
display:block;
}
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
header{
background-color:pink;
height:calc(100vh - 57px);
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
.iphone6plus{
display:block;
}
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
header{
background-color:orange;
height:calc(100vh);
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
.iphone6plus{
display:block;
}
}
/* ----------- iPhone X ----------- */
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
header{
background-color:yellow;
height:calc(100vh - 57px);
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
.iphone10{
display:block;
}
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
header{
background-color:olive;
height:calc(100vh);
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
.iphone10{
display:block;
}
}
</style>
</head>
<body>
<header class="iphone6">
iphone 6
</header>
<header class="iphone6plus">
iphone 6 plus
</header>
<header class="iphone10">
iphone 10
</header>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51882905
复制相关文章
相似问题
腾讯云开发者
