Geek Answers Handbook

Safari 9 (on iOS9) ignores CSS settings

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

This is responsive HTML that works great in all browsers, all window sizes. It also worked great on the iPhone until iOS9 appeared. Now the whole site is broken. Additional fields have been added (I guess), which means that all the boxes have a lot of free space. Below is a screenshot from my iPad. iPad screenshot

I set the viewport as

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

I tried setting the fields to 0 and even to negative values, but the fields are not moving. I also tried to remove any spaces between div tags without changes.

I use responsive CSS for all browsers: dev.mailagent.biz/cms/css/main_responsive.css Then add this feature specifically for iOS9: http://dev.mailagent.biz/cms/css/iOS9.css

However, most styles are still ignored, especially for fields. For example. The iOS9 stylesheet should actually align the entire site to the left (.centeredWrapper has margin: 0 not margin: auto). I know that iOS9.css IS is connected for iPhones / iPads, for example. Some fields and colors have been successfully changed in the menu at the top compared to the desktop version.

Does anyone know what is going on? How can I say Safari stop trying to be smart? Or how can I change my markup?

+7
html css iphone ios9 responsive-design
source share
2 answers

Try adding anti-aliasing to the viewport tag to match

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

line 281 (or 98) in main_responsive seems guilty:

 .content ul, .content ol, :not(.content ul.slideshowUl) { margin: 0 0 10px 30px;}

I commented on this in the Safari inspector, and the whole page returned to normal.

+2
source share

More articles:


All Articles