Search code examples
htmlcssresponsive-designmobile-safariiphone-5

Responsive Design: CSS Not loading on Iphone 5 Safari


I'm searching for a reason and a hint why my website (Link) is not shown correctly with responsive design (based on Twitter Bootstrap) on iPhone5 Safari Browser while it is completely working correctly on desktop using IE, Chrome or Safari. Also on HTC & Samsung Galaxy the website is working correctly.

By Googling I only could find 2 solutions which are A) cleaning the cache of the browser and B) using

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">

Both doesn't fix the problem. Also simulating the iPhone 5 Device in Google Developer Tool shows the website correctly while in reality the page does not show the CSS design.

Here the: False Responsive Design Screenshot

Any idea what I need to look for as I'm running out of possible ideas.


Solution

  • Based on the screenshot we moved away from the Iphone theory and discovered that there was simply a problem in one of the CSS files. We had a false symbol (?) in the file and this triggered that the full CSS was not loaded correctly. It seems though that all other devices were able to compensate the mistake.