ios - 响应式网站在 Firefox 响应模式下运行良好，但在 Chrome 或设备上运行不佳

Question

我为自己建立了一个网站，根据我对 Firefox 响应模式的测试，我认为它是响应式的。我用 iPhone 分辨率 (375*667) 横向和纵​​向模式测试了所有页面，效果很好。

但是，当我尝试在 Chrome 中打开同一个网站时，它无法正常显示。当从 iPhone 上查看时，它也显示出相同的效果。

这是我的网站 - http://v1chu.github.io/

第 2 节和第 3 节中使用的背景图像丢失了，但它在 Firefox 上运行良好(也在响应模式下)。我的设备也看不到背景。

此外，在 Chrome 和设备中查看时，网站内容看起来非常小。但在 Firefox 中查看时看起来还不错。

请问我建站的方式对不对？或者，如果我遗漏了什么，导致 Chrome 和设备上的网站困惑。

Answer 1

您正朝着正确的方向前进。

问题#1，背景图片

您的背景图像不会出现，因为您使用的是 background-attachment 值为 fixed 的属性.它设置与视口(viewport)(浏览器窗口)相关的背景。您基本上是将背景图片固定在页面顶部，当您到达第 2 和第 3 部分时，您已经滚动过了背景图片。

您已设置background-attachment通过速记 background 属性(property)。删除 fixed来自 background属性(property)。

background: url( '../img/aboutme.jpg' ) no-repeat center;

问题#2，文字大小

您需要使用响应式元标记。这是我使用的一个:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">