Foundation is not responsive on Safari and iphone

Question

My website breaks mysteriously on safari, is not responsive (foundation zurb worked on any other browser so far). This happens even when i don't use the js boundle.

This catastrophe is online: http://diet.paperide.com

I have no clue of the why! thanks...

Answer 1

Add the following within the head element of your document:

<meta name="viewport" content="width=device-width" />

Answer 2

First off when troubleshooting the best thing you can do is use the resources available to you while ignoring petty politics. HTML5 + XML parser = win. Use HTML5 and render your page as an application which will quickly help you track down serious rendering issues:

if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
 header('Content-Type: application/xhtml+xml');
}

Using the HTML validator I did see some issues where you have block elements as children of i elements. First off don't use the old i element, stick to em as it works much better for accessibility / screen readers. Secondly if you need to render something as a block put a span element there instead and use CSS display: block;.

The next thing you should try is to outright disable JavaScript and see if the page still renders.

Thirdly you'll need to check the HTTP requests; all all the requests HTTP 200 or 304?

If you're still having issues the next thing I would try is to outright disable CSS as a whole and if the problem stops then simply temporarily disable large blocks of CSS.

I've come across numerous issues with browsers. One issue was when IE would completely lock up because PHP wasn't outputting something in to a JavaScript variable so the output that froze IE was var example = ;.

I do have a Mac now and if you comment I'll be happy to verify that you've found and fixed the problem. Someone might be able to tell you what the problem is though it is much more valuable to have the skills to determine what the problem is. :-)

Answer 3

The problem was in: app.scss, the gulp script was configures like this:

//@include foundation-grid;
@include foundation-flex-grid;
[...]
@include foundation-flex-classes;

INSTEAD OF:

    @include foundation-grid;
[...]
    // @include foundation-flex-grid;
    // @include foundation-flex-classes;

generating a very different css ... (that worked on any non safari browser anyway).