响应式 WEB 在开发工具上的外观与在实际手机上的外观不同
[英]RESPONSIVE WEB LOOKS DIFERENT ON DEV-TOOLS THAN ON ACTUAL PHONE
问题描述
I wanted to know if there is anything related to media queries i'm not aware of that is making my web projects look different on the dev tools and on a mobile device.
我想知道是否有任何与媒体查询相关的事情，我不知道这使我的 web 项目在开发工具和移动设备上看起来不同。 To be clear, I made a webpage and started adding media queries to make it responsive.需要明确的是，我制作了一个网页并开始添加媒体查询以使其具有响应性。 I used chrome dev-tools to choose the iphone se as target and started re arranging each element till it looked as I expected.我使用 chrome dev-tools 选择 iphone se 作为目标，并开始重新排列每个元素，直到它看起来像我预期的那样。 something like this:像这样的东西：
enter image description here在此处输入图像描述
but when I open the webpage on the actual phone it looks something like this:但是当我在实际手机上打开网页时，它看起来像这样：
enter image description here在此处输入图像描述
here is the css:这是 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;
}
}
and the html but most of the tings are created via vanilla js:和 html 但大多数 tings 是通过 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>
I looked for answers but couldn't find anything that could help me so I would really apreciate your help in order to fix these because I'm trying to build a portfolio but non responsive webs don't look good at all.我正在寻找答案，但找不到任何可以帮助我的东西，所以我真的很感谢您的帮助以解决这些问题，因为我正在尝试建立一个投资组合，但非响应式网站看起来一点也不好看。 Thank you !谢谢 ！
1 个解决方案
解决方案1
0 2021-04-24 23:15:23
It might be because your positioning of the elements are based on viewport size, but the actual size of the elements aren't shrinking/expanding based on viewport.这可能是因为您对元素的定位是基于视口大小，但元素的实际大小不会根据视口缩小/扩展。 I personally wouldn't use vh units, but if you must, try shrinking the elements slightly as viewport dimensions get smaller.我个人不会使用 vh 单位，但如果必须，请尝试在视口尺寸变小时稍微缩小元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.