为什么我的网站在移动版 chrome 浏览器上与桌面版 chrome 在相同分辨率下看起来不一样？

Question

所以我在这里找不到与我的具体问题有关的答案，但我刚刚使用 chrome 完成了我的第一个专业网站。让它反应灵敏。看起来适合较小的设备。但是当我把它放到网上（view here）并使用 chrome 在我的 Iphone 6s 上查看它时。它有很多错误。这里只是几个例子。

按钮被推出父 div 并且输入样式已更改 https://imgur.com/a/ZFjyK6J

按钮颜色发生了变化，我的下划线也发生了变化。但在我的桌面上，它在移动设备上看起来还不错？？ https://imgur.com/a/IyVPOjq

输入元素在这里显示得更大https://imgur.com/a/SiyDCI1

这里的图像真的很失真https://imgur.com/a/5SO3IS9

这是我的 github https://github.com/spabsa/kaneConcrete

Answer 1

对于按钮颜色，只需在 css 中添加您想要的背景颜色

.footer button {
    position: absolute;
    right: 0;
    top: -50px;
    border: none;
    font-family: 'Rajdhani';
    font-size: 1.2rem;
    transition: all ease 0.4s;
    outline: none;
    background-color: gainsboro; //or any other color
}

对于输入元素试试

@media screen and (max-width: 924px)
.row-2 input {
    width: -webkit-fill-available;
    margin-bottom: 5px;
}

“将设备模式视为您的页面在移动设备上的外观和感觉的一阶近似值。使用设备模式，您实际上并没有在移动设备上运行您的代码。您可以模拟移动用户体验笔记本电脑或台式机。”您可以查看更多here。

“CSS 选择器上的 -webkit 前缀是只有该引擎才能处理的属性，与 -moz 属性非常相似。”