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.
2
Answers
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.
Download bootstrap to your web server and include the path in the page, so don’t have to rely on another source that could go down. This should fix your problem, if not, then just try Cordova. It is possible that your your phone is being blocked by the bootstrap site because the it is going over mobile network or something like that.
Source: Personal Experience
Regards,
PRO