我将展示屏幕分辨率和响应式网页,但在我设法在谷歌开发工具,iPhone 7屏幕模拟器上显示一个示例,但试图在实际手机上浏览页面并且它'空白。
我已添加meta name:viewpoint
并确保所有内容都指向正确的文件。从各方面来看,它应该像在模拟器上显示一样工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> iPhone 6 %amp; 7 will show</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style>
/* shows the same display on both landscape and portrait */
/* iPhone 7 in portrait & landscape */
/* @media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
body{
background-image: url('imgs/P-375px.jpg')
}
} */
/* comment out to only show in portrait */
/* iPhone 7 in landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
body{
background-image: url('imgs/L-667px.jpg')
}
.box{
background:pink;
width:20%;
height: 20%;
padding:5%;
border: red 2px solid;
color:green;
}
}
/* comment out to only show in landscape */
/* iPhone 7 in portrait */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
body{
background-image: url('imgs/P-375px.jpg')
}
.box{
background:yellow;
width:20%;
height: 20%;
padding:5%;
border: blue 2px solid;
color:orange;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
答案 0 :(得分:0)
只需将min-device-width
更改为min-width
,将max-device-width
更改为max-width
- 您在媒体查询中使用的像素值实际上是&#34; css像素&#34;,不是&#34;设备像素&#34; (由于视网膜显示,这是两倍)