为什么我的网站在移动版 chrome 浏览器上的外观与桌面版 chrome 的分辨率不同?

阿尔弗雷德

所以我在这里找不到与我的具体问题有关的答案,但我刚刚使用 chrome 完成了我的第一个专业网站。让它响应。看起来很适合较小的设备。但是当我把它放到网上(在这里查看)并使用 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

雷米吉奥·阿里纳斯·穆尼奥斯·德科特

对于按钮颜色,只需在 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;
}

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

CSS 选择器上-webkit前缀是仅此引擎打算处理的属性,与 -moz 属性非常相似。”

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

为什么Ubuntu上的Firefox和chrome的图像分辨率不同?

来自分类Dev

如何在Google Chrome浏览器桌面版中查看网页的移动版本?

来自分类Dev

桌面版Google Chrome浏览器的拼写检查是否会受到操作系统的某种影响?

来自分类Dev

为什么Google Chrome浏览器模拟器以375x667的分辨率显示iPhone 6?

来自分类Dev

为什么我的网站上的字体在Android版Chrome浏览器上看起来更加流畅?

来自分类Dev

Chrome上的getUserMedia经常无法返回最佳分辨率

来自分类Dev

如何替换Google Chrome浏览器的低分辨率通知图标?

来自分类Dev

如何替换Google Chrome浏览器的低分辨率通知图标?

来自分类Dev

Google Chrome浏览器仅以最小分辨率显示IMG(CSS @MEDIA)

来自分类Dev

极简主义网站:标头flexbox文本垂直居中于Chrome桌面,而不是Chrome移动版。为什么?

来自分类Dev

网站在不同的显示器分辨率和 css 上看起来不同

来自分类Dev

如何在Docky中获得Google Chrome浏览器的更高分辨率的图标?

来自分类Dev

WebSockets可在桌面浏览器中使用,但在Android版Chrome中无法使用

来自分类Dev

iOS-HTML来源与检查桌面版Chrome中的元素时不同

来自分类Dev

屏幕分辨率较小的Chrome用户如何使网站(如StackOverflow)更易使用?

来自分类Dev

Masonry在moblie浏览器(chrome)上不起作用,并且仅当我重新加载(ctrl + f5)页面而不在刷新(f5)上时才在Chrome桌面版本上起作用

来自分类Dev

移动Safari和Android Chrome无法返回正确的屏幕分辨率

来自分类Dev

显示器关闭时,chrome分辨率会发生变化

来自分类Dev

无法在IOS Safari上访问对象,但在桌面版Chrome上可以使用

来自分类Dev

相对 JS 文件导入的 TypeScript 分辨率 vs. 导入的 Chrome 分辨率

来自分类Dev

我的浏览器不会使用我的全屏分辨率,也不会使用它们之间的不同分辨率

来自分类Dev

我的网站在移动Chrome中显示右侧的空白,但在桌面Chrome中未显示右侧的空白

来自分类Dev

在Chrome中模拟高分辨率屏幕?

来自分类Dev

我的网站在 Firefox 中看起来与 Chrome 不同

来自分类Dev

我的网站在我的Chrome上不断崩溃

来自分类Dev

为什么onClick()在Chrome浏览器上无法使用?

来自分类Dev

为什么我的函数返回与Chrome浏览器中的console.log()不同

来自分类Dev

如何使我的游戏在具有不同分辨率的不同设备上运行?

来自分类Dev

为什么在具有相同分辨率的屏幕上,窗口大小不同?

Related 相关文章

  1. 1

    为什么Ubuntu上的Firefox和chrome的图像分辨率不同?

  2. 2

    如何在Google Chrome浏览器桌面版中查看网页的移动版本?

  3. 3

    桌面版Google Chrome浏览器的拼写检查是否会受到操作系统的某种影响?

  4. 4

    为什么Google Chrome浏览器模拟器以375x667的分辨率显示iPhone 6?

  5. 5

    为什么我的网站上的字体在Android版Chrome浏览器上看起来更加流畅?

  6. 6

    Chrome上的getUserMedia经常无法返回最佳分辨率

  7. 7

    如何替换Google Chrome浏览器的低分辨率通知图标?

  8. 8

    如何替换Google Chrome浏览器的低分辨率通知图标?

  9. 9

    Google Chrome浏览器仅以最小分辨率显示IMG(CSS @MEDIA)

  10. 10

    极简主义网站:标头flexbox文本垂直居中于Chrome桌面,而不是Chrome移动版。为什么?

  11. 11

    网站在不同的显示器分辨率和 css 上看起来不同

  12. 12

    如何在Docky中获得Google Chrome浏览器的更高分辨率的图标?

  13. 13

    WebSockets可在桌面浏览器中使用,但在Android版Chrome中无法使用

  14. 14

    iOS-HTML来源与检查桌面版Chrome中的元素时不同

  15. 15

    屏幕分辨率较小的Chrome用户如何使网站(如StackOverflow)更易使用?

  16. 16

    Masonry在moblie浏览器(chrome)上不起作用,并且仅当我重新加载(ctrl + f5)页面而不在刷新(f5)上时才在Chrome桌面版本上起作用

  17. 17

    移动Safari和Android Chrome无法返回正确的屏幕分辨率

  18. 18

    显示器关闭时,chrome分辨率会发生变化

  19. 19

    无法在IOS Safari上访问对象,但在桌面版Chrome上可以使用

  20. 20

    相对 JS 文件导入的 TypeScript 分辨率 vs. 导入的 Chrome 分辨率

  21. 21

    我的浏览器不会使用我的全屏分辨率,也不会使用它们之间的不同分辨率

  22. 22

    我的网站在移动Chrome中显示右侧的空白,但在桌面Chrome中未显示右侧的空白

  23. 23

    在Chrome中模拟高分辨率屏幕?

  24. 24

    我的网站在 Firefox 中看起来与 Chrome 不同

  25. 25

    我的网站在我的Chrome上不断崩溃

  26. 26

    为什么onClick()在Chrome浏览器上无法使用?

  27. 27

    为什么我的函数返回与Chrome浏览器中的console.log()不同

  28. 28

    如何使我的游戏在具有不同分辨率的不同设备上运行?

  29. 29

    为什么在具有相同分辨率的屏幕上,窗口大小不同?

热门标签

归档