我应该在我的手机上遵循 Dreamweavers 设备预览布局还是在相同的屏幕尺寸下使用 Chromes 预览，因为它们看起来非常不同？

问题描述

我正在使用当前的 Dreamweaver 来构建我的网站。我已将设备预览设置为在我的 Iphone 11 promax 上查看它，但由于某种原因，当我在 Chrome 浏览器中以相同的设备尺寸预览它时，我的手机上的对齐方式有所不同。这是它在我的浏览器中的样子的屏幕截图： enter image description here

这是我手机上的样子： enter image description here

我不确定您是否能够看到屏幕截图，因为我是这个网站的新手，但我的代码片段如下。有谁知道为什么对齐如此不同，我应该遵循哪一个？我的 h4 和 p 标签的手机对齐与 p 上方的 h4 正确对齐，但是当我在浏览器中查看时， h4 和 p 标签相互重叠。非常感谢您的帮助！

<div class="hm-onlkr"></div>
<div class="onlkr-info">
    <img src="imgs/onlooker.png" alt="Onlooker image" class="onlkr-img">
       <h4>The Onlooker</h4>
       <p class="onlkr-text">Getting out there and being the change you want to see in the world is what we live by.  From volunteering for local charities,becoming a mentor or simply just making someone smile is what doing your own good means.  Now go do your own good today!</p>
</div>

.hm-onlkr {
    position: relative;
    display: flex;
    width: 100%;
    height: 700px;
    background-color: #161616;
    transform: skewY(5deg) translateY(200px);
    Box-shadow: 1px 0.5px 15px 0px rgba(22,22,0.5);
}

.onlkr-info {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 75%;
    transform: translateY(-440px);
}

.onlkr-img {
    grid-row: span 2;
    width: auto;
    height: 500px;
}

h4 {
    position: relative;
    font-family: 'bleeding cowboys';
    font-size: 40px;
    color: #d6d6d6;  
    margin: 160px 0 0 40px;
}

.onlkr-text {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    color: #d6d6d6;
    margin: 0 0 160px 40px;
}


@media (max-width: 875px) {
.onlkr-info {
        display: flex;
    }
    
    .onlkr-img {
        position: absolute;
        margin-top: 180px;
    }
    
    h4 {
        position: relative;
        margin: 150px auto 0;
    }
    
    .onlkr-text {
        position: absolute;
        margin: 210px 0 0 0;
        width: 100%;
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）