我正在建立一个网站，我想添加一个类似推特的帖子系统，为样式我使用Bootstrap4，我有我自己的CSS表。
当我以开发者模式在Chrome上运行我的网站，并选择iPhone X的设置时，它就像一个魅力。当我打开iPhone X上的网站时，一切看起来都乱七八糟，位置也不对。
Chrome上使用iPhone模式的网站
我的iPhone X上有一张图片的网站
我的iPhone X上的网站
我的HTML:
<!DOCTYPE html>
<html style="background-color:powderblue;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body class="bg-white text-black">
<div class="post container-fluid pt-3">
<div class="">
<img src="profile.jpg" class="profile_pic rounded-circle float-left">
</div>
<div class="">
<div class="row h-auto header">
<a href="post_detail.html" class="hide-link ml-3 font-weight-bold">
<p class="">Luke_KS </p>
</a>
<i class="real fas fa-check-circle ml-1 mt-1" data-toggle="tooltip" data-placement="bottom" title="Verified User!"></i>
<p class="ml-2 font-weight-light">21.12.2020</p>
<i class="mt-1 dropdown fas fa-angle-down ml-auto"></i>
</div>
<div class="row">
<p class="col-sm">
Sample text
</p>
</div>
<div class="row pl-6 d-flexbox container ">
<div class="d-flex justify-content-start socials">
<div class="col-sm">
<p><a href="#" class="hide-link "> <i class=" heart far fa-heart "></i></a> 98</p>
</div>
<div class="col-sm">
<p><a href="#" ><i class="comment far fa-comment hide-link"></i></a> 30</p>
</div>
<div class="col-sm">
<p><a href="#" ><i class="fas fa-share hide-link"></i></a> 30</p>
</div>
</div>
</div>
</div>
</div>
<hr>
</html>
我的CSS
.hide-link{
text-decoration: none;
color: black;
}
.post:hover{
background-color: #f0f8ff
}
.heart:hover{
color: red;
font-weight: bolder;
transition: all .5s linear;
}
.comment:hover{
color: #94b4ff;
font-weight: bolder;
transition: all .5s linear;
}
.dropdown:active{
color: rgb(28, 146, 243);
}
.real{
color: #94b4ff;
}
.post-img{
border: 1px solid black;
width: 90%;
height: auto;
}
.header{
height: 30px;
}
.profile_pic {
height: 48px;
width: 48px;
margin-bottom: auto;
}
.socials {
margin-left: 48px;
padding-left: 0px;
}
.comments {
margin: 0 40px 0 75px;
padding-left: 0px;
}
.post-content {
margin: 0 40px 0 65px;
padding-left: 0px;
}
这是大约一年前问过的类似问题。简单的答案是，DevTools并不能给出页面的精确表示，在实际的移动设备上查看它是您的最佳选择。
下面是你可以读到的关于这一点的更多链接:
为什么Chrome DevTools对移动测试不准确
StackOverflow:Chrome DevTools中的响应模拟总是准确的吗？
