Question

因此，我在这里找不到与我的特定问题有关的答案，但我刚刚完成了第一个使用chrome的专业网站。使它响应。对于较小的设备看起来不错。但是当我将其放到网上（view here）并在我的iPhone 6s上使用Chrome浏览器查看时。它有很多错误。这只是几个例子。

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

按钮的颜色已更改，并且我的下划线已更改。但是，在我的dekstop上再次在移动设备上看起来不错吗？ 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属性非常相似。”

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

1 个答案: