【发布时间】：2023-04-10 03:13:01
【问题描述】：
我本来打算演示屏幕分辨率和响应式网页，但在我设法在谷歌开发工具 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>
【问题讨论】：
标签： html css responsive-design media-queries google-developer-tools