Safari 9 (in iOS9) ignores CSS settings

Question

I am working on this web page: http://dev.mailagent.biz/cms/NEWS

It is responsive HTML that works fine in all browsers, all window sizes. It used to work fine on iPhones too, until iOS9 came to be. Now the whole site is broken. Extra margins (I am guessing) have been added, meaning all boxes appear to have a lot of white space. Below is a screenshot from my iPad.

I set the viewport as

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

I tried setting the margins to 0 and even to negative values, but the boxes don't move. I also tried removing any white spaces between div tags, with no change.

I am using a responsive css for all browsers: dev.mailagent.biz/cms/css/main_responsive.css Then attaching this one specifically for iOS9: http://dev.mailagent.biz/cms/css/iOS9.css

However, most of the styles are still ignored, especially to do with margins. E.g. the iOS9 stylesheet should actually align the whole site to the left (.centeredWrapper has margin:0 not margin:auto). I know that the iOS9.css IS attached for iPhones/iPads, as e.g. some margins and colours were successfully changed in the menu across the top compared to the desktop version.

Does anyone have any idea what's going on? How to I tell Safari to stop trying to be clever? Or how should I change my markup?

Answer 1

Try adding a shrink-to-fit to your viewport tag

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">