The site does not display correctly on Safari iPad 4, what's the problem?

Question

css

Good afternoon! I am making my first website for a client - test.mezoterika.com . Website with adaptive layout. The client says that on his iPad with a retina display in the Safari browser, the site is displayed like this: And on google chrome everything is displayed perfectly:

What could be the problem? I believe that the problem is in media queries, but I'm not sure.
I have the following media queries with styles:
media only screen and (min-width: 960px) and (max-width: 1199px)
media only screen and (min-width: 751px) and (max-width: 959px)
media only screen and (min-width: 480px) and (max-width: 750px)
media only screen and (max-width: 479px)
I hope someone has come across this kind of problem.

Answer 1

Everything is displayed well for me, this is the first thing.
This is not a safari (in the first photo), secondly.

Answer 2

Guys, try pliz who has an iPad, tell me how it works for you.

Answer 3

UPD. I'm blind, I didn't see the warning: "This functionality is not implemented by any of the browsers. But it is present in many transpilers, such as Traceur Compiler, Babel, Rollup or Webpack."
https://developer.mozilla.org/en/docs/Web/JavaScript...

Answer 4

Have you connected the module builder? Webpack, Browserify for example.

Answer 5

'use strict' at the beginning. Not all browsers understand ES6 yet, hence the error. Run code through babel

Answer 6

Actually, this warning is already outdated: https://caniuse.com/#feat=es6-module
But, of course, it’s too early for production in this form (although it depends on the project).