时间戳

首页 > 解决方案 > index.html 不在移动浏览器上加载 style.css（离线，保存在文件夹中）

android - index.html 不在移动浏览器上加载 style.css（离线，保存在文件夹中）

问题描述

（请在收到不好的反馈之前阅读。有类似的问题，但不是我想要的。）

我有一个网页，在保存在文件夹中的台式电脑上制作。（不使用任何 XAMPP 或其他任何东西，只使用 Visual Studio Code 中的 Live Server 插件。）

我已将文件夹从桌面复制/粘贴到手机（华为 P10）。比我简单地打开“index.html”，但加载的唯一内容是创建的内容....没有图像，没有样式，什么都没有。请问有什么帮助吗？

当然，我的“style.css”在一个名为“css”的文件夹中，图像在一个名为“img”的文件夹中。

另见图片：

我在移动设备上使用 Chrome。

html头代码：

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>iPhone8 product presentation | Welcome</title>
<link rel="stylesheet" type="text/css" href="css/style.css">

我的主文件夹

我的css文件夹

我的图片文件夹

标签： androidhtmlcssmobile-browser

解决方案

您称呼它的方式是正确的。我已经检查了代码存储库的 gdrive 链接，在我的选项卡上运行了 index.html。它对我来说很好。我认为您的代码没有任何问题。

调试它以找出问题所在。尝试在 Chrome 上进行远程调试。

要调试它，您可以简单地：

  1. 在您的 Android 上打开开发人员选项。
  2. 选择启用 USB 调试。
  3. 在您的开发机器上，打开 Chrome。
  4. 打开 DevTools.(ctrl+shift+i)
  5. 在 DevTools 中，单击主菜单（单击右上角的垂直省略号图标），然后选择更多工具 > 远程设备。
  6. 在 DevTools - 远程设备中，打开设置选项卡。
  7. 确保启用了发现 USB 设备复选框。
  8. 使用 USB 电缆将您的 Android 设备直接连接到您的开发机器。第一次执行此操作时，您通常会看到 DevTools 检测到未知设备。如果您在 Android 设备的型号名称下方看到一个绿点和已连接文本，则 DevTools 已成功建立与您设备的连接。
  9. 如果您的设备显示为未知，请在您的 Android 设备上接受允许 USB 调试权限提示。
  10. 然后您可以检查控制台选项卡以查看是否有一些错误。

推荐阅读