手机浏览器找不到css文件答案

【问题标题】：Mobile browser doesn't find css files手机浏览器找不到css文件
【发布时间】：2021-08-20 14:30:34
【问题描述】：

我正在建立我的第一个网站，结构如下：一个名为 website 的文件夹，其中包含两个名为 html 和 css 的子文件夹。 html 文件夹包含一个名为 home.htm 的文件，css 文件夹包含两个名为 general_style.css 和 home_style.css 的文件。

在 home.htm 中我输入了以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>My title</title> 
<meta charset="UTF-8">
<meta name="viewport" 
content="width=device-width, 
initial-scale=1.0">
<link rel="stylesheet" 
href="../css/general_style.css" 
type="text/css">
<link rel="stylesheet" 
href="../css/home_style.css" 
type="text/css">
<link rel="stylesheet"   

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head> 
<body>  
<!-- code goes here -->
</body>
</html>

这在我桌面上的 Firefox 中可以正常工作，但在我智能手机上的 Chrome 中却不行。在智能手机上仅显示 html 和来自https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css 的图标。

我自己的 css 文件中的所有代码都没有显示，https://kit.fontawesome.com/a076d05399.js 中的图标也没有显示。

有人可以帮帮我吗？

PS：html 和 css 文件都经过验证，没有错误或警告。

【问题讨论】：

尝试清除缓存并重新启动浏览器。

标签： html css

【解决方案1】：

我不能说为什么它不起作用。但我可以告诉你，如果你计划构建网站并在各种设备上测试它们，你可能想要运行本地 Web 服务器。这样，您的所有文件都可以托管在您的计算机中，并且您可以使用托管文件的计算机的本地 IP 地址从连接到网络的任何设备访问您的站点。（例如：如果您在移动浏览器中打开 192.168.0.x/home.html，它会显示您的网站，而无需手动传输任何文件。）

这也是首选方法，因为它更接近用户将来访问您网站的方式。

您可能想查找“如何运行本地 Web 服务器”以找到适合您的指南。有很多方法和软件工具可供选择。

如果您使用的是 Mac，以下是一种快速简便的运行方法：

转到 /Library/Web Server/Documents 并粘贴包含所有代码和资产的文件夹。给它起个简单的名字，不要有空格
打开终端并输入 sudo apachectl start。它会提示您输入密码。键入它并按回车键。（它可能看起来像是没有输入，因为它不会向您显示任何内容，但它正在工作。）
打开浏览器并在地址栏中输入 localhost。您应该会看到一些大的衬线粗体字母，上面写着“It works！”。
一切就绪！现在只需访问 localhost/folder-name/home.html，它就会显示您的网站！（提示：您可能希望将 home.html 重命名为 index.html。如果这样做，您将能够访问 localhost/folder-name/ 并且服务器将自动加载 index.html

请记住，如果您要通过手机或任何其他设备访问此内容，您必须连接到同一网络。此外，输入 localhost 也不起作用。对于其他设备，您必须提供运行服务器的计算机的本地 IP 地址。像这样的东西：192.168.0.5/folder-name/home.html/。您可以在 Network Preferences 中找到计算机的本地 IP。

(这是因为 macOS 预装了 Apache webserver 软件，并且设置了 /Library/Web Server/Documents/ 文件夹由 apache 托管。我们在终端中所做的只是打开 apache。你可以打开通过在终端中输入“sudo apachectl stop”来关闭它）。

【讨论】：

除此之外，Visual Studio Code 有一个 live-server plugin，允许您立即托管您的 Web 开发站点。并且 JetBrains 编辑器有一个内置的web server。
我发现了问题所在。这是 URL 的问题。 Firefox 使用 file:/// 而 Chrome 使用 content://。更改 IT 后，它找到了 css 文件，但布局被搞砸了。这有点像浏览器桌面。

【解决方案2】：

您正在尝试在移动浏览器上运行您的代码？

由于它在您的计算机Firefox浏览器上可以流畅地运行，但在手机上无法运行，这可能是因为您的移动设备上没有CSS文件，而在您的桌面上有它们。我认为这是一个问题。

【讨论】：

是的，我愿意。我只是将文件复制到我的手机中，并将它们放在完全相同的文件夹结构中。