CSS doesn't appear to load when opening a local HTML page on mobile

Troubleshooting
1

I have a barebones, minimalist webpage that I run locally on my computer so that I can interface with my Spark Core (older version of the Photon) and my functions exposed through the Cloud API.

The HTML is completely bare–I don’t need a whole bunch of things on there. Here is my HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0;">
    <link rel="stylesheet" type="text/css" href="style.css" media="screen">
    <title>Spark</title>
    <script src="http://cdn.jsdelivr.net/sparkjs/1.0.0/spark.min.js"></script>
  </head>
  <body>
    <div onclick="functionPost('function', 'argument')">
      <h1>Spark</h1>
      <br>
      <div id="node">
        <p></p>
      </div>
    </div>

The CSS file is in the same directory as the HTML file on both my computer and my phone.

I have an empty <p></p> element in there so that I can populate it with returned data from the JSON response with a DOM injection. That is handled through Javascript and doesn’t have any bearing on my issue. I just wanted to mention that before anyone points it out.

I don’t have this hosted as I have an access token embedded into it so I can validate through the Cloud API. Hosting it locally works perfect for me.

I built and tested all of this on my laptop. However, when I brought it over to my phone, the Javascript works but the CSS doesn’t appear to load at all.

I’m not much of a web developer but I can get my way around. I was able to make it work, both in stylization and in behaviour, but I don’t know why it doesn’t work on my phone.

One thing I noticed is that when I run the HTML file from the directory on my phone, this shows up in the URL bar:

content://0@media/external/file/7320

So, I’m not exactly sure how the mobile platform is treating that file as it doesn’t show it having an HTML extension.

I am using Chrome version 54.0.2840.71 m and Windows 10 Home edition on my computer and I am using Chrome version 54.0.2840.68 on Android 6.0.1.

EDIT: I also wanted to add that the only handles I am accessing in the CSS file are:

body {}

h1 {}

p {}

#node {}

*{}
2

try:

<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

note the forward leaning backslash...

4

@BulldogLowell I still had that in from troubleshooting yesterday. Still no joy.

5

and the missing closing </body> tag is in there too?

what happens on the console? I get several other syntax issues popping

6

I do. In my HTML, the next section is the script block for JS. I made sure everything is closed out.

Everything works perfectly on my computer, so I know it isn’t with my markup.

You mentioned about a console. What console? If you’re referring to the one embedded in the Particle page, my sketch works perfectly. My only issue is that CSS doesn’t appear to load when I drop the HTML and CSS files on my phone.

7

Try your Web Browser’s Error logging console.

An error that manifests itself in one browser may or may not in another.

8

@BulldogLowell I bypassed the issue by just embedding CSS into the HTML with style blocks. I hate doing it that way but it consolidates my files and it made it work.

I’m still curious why it didn’t link, though.

13

I had exactly your problem, and the reason was the weird ID-based URL protocol used by mobile browsers when opening local HTML files.

The following “file” protocol URL works and loads ALL external files, such as CSS or images, because it uses the actual filepath:

file:///sdcard/Downloads/myfile.html

But this “content” protocol URL does NOT work and doesn’t load ANY additional files, since they’re just IDs:

content://media/external/file/123

The browser is simply fed the ID 123, and cannot determine whether the CSS style sheet would be 456 or 789, so it cannot load ANYTHING. Yet that “content” protocol URL is often the default one when opening local HTML pages from a file manager app on smartphones.

(Sorry for bumping an old thread, but I couldn’t find this solution anywhere, so I wanted to share it.)