已链接 CSS 未在移动设备上显示

Question

我不确定这是一个需要编码解决方案还是仅需要理论解释的问题，但这里...

我有一个 HTML 文件链接了几个样式表 + 字体：

<head>
<meta charset="UTF-8">  
<title>T6</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="parallax.css" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="annex.css" type="text/css">
</head>

CSS 文件与 index.html（在 Dropbox 上）位于同一文件夹中。它们在 Chrome 和我桌面上的 Edge 上显示良好，以及通过 Chrome 的开发工具的设备模拟选项（响应功能完好无损）。所以一切都适用于桌面浏览器，甚至是模拟移动设备的浏览器。这是后者的截图：

Chrome 桌面（使用开发工具模拟设备）

但是当我在 Android Chrome 浏览器（Nexus 6P；一切都已更新）上打开文件时，我得到了这个：

Chrome mobile

从视觉的角度来看，很明显 CSS 根本没有被识别（但它确实识别了 Font Awesome 图标）。这是我的设备问题，我在 index.html 上引用 CSS 文件的方式，还是其他问题？

我的所有文件（图像，本地 CSS）都使用 Dropbox 存储在同一个文件夹中，并且所有参考资料在桌面上都可以正常工作。当我使用我的 phone 时，我打开 Dropbox，找到我的 index.html 文件，然后使用 Chrome 打开它。我还没有在其他移动设备上测试过。

我确实尝试过我的 index.html 引用其 CSS 文件的方式，并且将我的所有 CSS（除了字体和图标）放在一个标签中似乎工作。这真的让 index.html 变得混乱，所以我想知道这是否是解决此问题的唯一方法。我还没有尝试@import，但这显然是不好的做法...(?)

Answer 1

这可能与保管箱有关。您不应该使用保管箱作为主机。尝试获得一个免费的共享网络托管帐户，在那里上传您的文件并从那里访问它。

而且我很惊讶它在你的桌面上工作，除非你将文件同步到你的机器并以这种方式查看它们？

已链接 CSS 未在移动设备上显示

Linked CSS not showing on mobile

html

css

android

google-chrome

mobile-website