Works fine on mobile browsers/PC Windows Chrome, but shows a blank screen for MAC desktop Safari. How do I fix this?

Question

Here is what I have in the first passage:
 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.responsive {width: 100%;height: auto;} img {max-width:100%; height:auto;}</style>

<center>''Cold Propsect Party''</center>

<center><img src="https://images.pexels.com/photos/953207/pexels-photo-953207.jpeg?auto=compress&cs=tinysrgb&h=350" alt="conversation" class="responsive"></center>

<center>Even if you don't have any friends or relatives in your market, there is a way to meet people and turn strangers into friends!</center>

<center>[[Test out your cold prospecting skills here!->Cold Prospect Party]]</center>

 

Answer 1

You didn't mention what story format you are using in the question tags.

That said, the stuff inside the "<style>" element should be in your story's stylesheet, not in the passage.

Also, you probably need to add the "<meta>" element programmatically in your JavaScript like this:

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0">');

I don't have Safari and I haven't tested that, so I'm not 100% positive that will work for what you want.  Also, since the "<meta>" element is added later, it may be ignored by the browser.

Another, possibly better, option would be to simply open up the published HTML in a good text editor, like Notepad++, and put the "<meta>" element in that way.

Hope that helps!

Comments

Thank you for the story style sheet instruction!

I added the meta element you wrote to my JavaScript and for whatever reason it still will not open in Safari. :(

Sorry for any important information I left out, I am an amateur Twine user!

---

@miratista

You still haven't stated the name and version number of the Story Format (Harlowe, SugarCube, Snowman) you are using, and as previously explained answers can vary based on that information.

---

Ah, sorry. Sugarcube.

---

Yeah, I wasn't sure if the JavaScript would work, since I knew that it was possible the browser only checked for the <meta> when it opened the file.

Does it open in Safari if you take that stuff out?  It's best to make sure that something else isn't causing the problem.

Also, did you try manually editing the <meta> into the published HTML like I suggested earlier?

---

Do you know what version?  Older versions have issues in Safari.

---

I have the latest version. I am going to do a new project and see if I have safari issues without tags.

---

So I made a new Twine using no tags. I wrote this in one passage:

This is a Safari Test.

It didn't show up in Safari either. So now the issue is Twine 2 not working in Safari. Any solution ideas for that?

Answer 2

The information within the Safari Showing Black Screen question may be relevant to your issue.