响应式网页在开发工具上的外观与实际手机上的不同
Posted
技术标签:
【中文标题】响应式网页在开发工具上的外观与实际手机上的不同【英文标题】：RESPONSIVE WEB LOOKS DIFERENT ON DEV-TOOLS THAN ON ACTUAL PHONE 【发布时间】：2021-07-18 17:47:37 【问题描述】：我想知道是否有任何与媒体查询相关的我不知道的东西，这使我的 Web 项目在开发工具和移动设备上看起来有所不同。 需要明确的是，我制作了一个网页并开始添加媒体查询以使其具有响应性。我使用 chrome dev-tools 选择 iphone se 作为目标，并开始重新排列每个元素，直到它看起来像我预期的那样。像这样：
enter image description here
但是当我在实际手机上打开网页时，它看起来像这样：
enter image description here
这是css：
@media screen and (max-width: 330px ) /*for iphone 5/se */
#burter
top: 19vh;
left: 24vw;
font-size: 9vw;
#logo
width: 23vw;
top: 17vh;
left: 0vw;
#navtabs
top: 30vh;
left: 2vw;
flex-direction: row;
height: 14vw;
width: 88vw;
.divisor
width: 8%;
.tab
font-size: 4vw;
#imgside
display: none;
#sponsors
width: 88vw;
height: 15vw;
top: 40vh;
left: 2vw;
flex-direction: row;
.sponsimg
width: 14%;
#welcome
left: 28vw;
#welcome h2
font-size: 13vw;
#welcome p
width: 67vw;
.homecontainer
width: 64vw;
left: 9vw;
height: 43vh;
top: 57vh;
.homeheader
font-size: 6vw;
.hometext
font-size: 3vw;
line-height: 1.5;
#map
width: 70vw;
left: 12vw;
top: 53vh;
height: 30vh;
#contactus
left: 26vw;
top: 82vh;
#divmedia
width: 80vw;
left: 7.7vw;
bottom: 3vh;
.media
font-size: 9vw;
#menucontainer
top: 48vh;
height: 75vh;
width: 121vw;
left: -14vw;
justify-content: space-evenly;
还有 html，但大部分内容都是通过 vanilla js 创建的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="./main.js"></script>
<title>Burter Burguer Inc.</title>
<link rel = "icon" href =
"../images/burguerlogo/logo.png"
type = "image/x-icon">
<link rel="stylesheet" href="stylesheet.css">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA89atXDJHDp5fVs2YF-DB1fQXVbn3GgZM&callback=initMap">
</script>
</head>
<body id="body">
<div id="header">
<img id="logo" src="../images/burguerlogo/logo.png">
<h1 id="burter">BURTER INC.</h1>
<div id="navtabs">
<button id="homebutton" class="tab">HOME</button>
<div class="divisor"></div>
<button id="menubutton" class="tab">MENU</button>
<div class="divisor"></div>
<button id="contactbutton" class="tab">CONTACT</button>
</div>
<div class="removable" id="welcome">
<h2>WELCOME</h2>
<p>To your new favourite food...</p>
</div>
<img id="imgside" src="../images/Clever Photo Mashups by Stephen McMennamy.jpeg">
<div id="sponsors">
<img class="sponsimg" src="../images/mc_cain-removebg-preview.png">
<img class="sponsimg" src="../images/cocacola-removebg-preview.png">
<img class="sponsimg" src="../images/corona-removebg-preview.png">
<img class="sponsimg" src="../images/heinz.png">
</div>
</div>
<div style="display: none;" id="map"></div>
</body>
</html>
我正在寻找答案，但找不到任何可以帮助我的东西，所以我非常感谢您的帮助以解决这些问题，因为我正在尝试构建一个投资组合，但非响应式网站看起来一点也不好看。谢谢！
【问题讨论】：
使用vh 单位垂直定位元素不是一个好主意。让它们流动。在你的真实手机上，你有地址栏和底部菜单来降低视口的高度，这会影响vh。如果您在浏览器模拟器中选择Responsive 并调整高度，您将看到相同的结果：imgur.com/a/iX9X0Ar
谢谢！我没有那样考虑地址栏。但问题是我不知道我是否可以让它们流动，因为我所有的位置都是绝对的，所以我至少需要使用边距来定位它们，不是吗？
position: absolute 有时很有用，但是当改变屏幕尺寸时，多个元素很难很好地协同工作，尤其是当宽度和高度都起作用时。如果你让它们流动，是的，你可以使用边距来确保导航栏和赞助商栏之间的距离保持你想要的距离。如果您希望元素重叠（例如您的徽标），您可以使用负边距
【参考方案1】：
这可能是因为您对元素的定位是基于视口大小，但元素的实际大小并未根据视口缩小/扩展。我个人不会使用 vh 单位，但如果必须，请尝试在视口尺寸变小时稍微缩小元素。
【讨论】：
谢谢！元素正在调整大小，但实际上它们随着视图宽度而不是视图高度而变化，这似乎也是问题所在，也许我会将这些度量设置为像素（reizong 的那些） 但问题是，如果开发工具显示不同的东西，我怎么知道元素何时正确放置在现实生活中？ 通过减去地址栏和底部菜单找出移动视口的实际尺寸。这可能很难做到，看看这个discussion中提到的链接以上是关于响应式网页在开发工具上的外观与实际手机上的不同的主要内容，如果未能解决你的问题，请参考以下文章