1

I currently have a site that is rendering properly in Safari for iPad 1 & 2 and properly in iPad 1 Chrome but Chrome for iPad 2 isn't picking up my media queries for portrait mode properly.

The css query I'm using:

@media only screen and (min-width: 767px) and (max-width: 979px)

This grabs all the other browsers without issue. I've tried adding (orientation: portrait) to this and it fails to fix the issue with Chrome.

Any suggestions?

atxpunkrock
  • 504
  • 8
  • 20
  • This is just an idea: do not test in chrome! if it works in Safari, it will work in Chrome. I had the same issue and it took me more than an hour to find out that chrome won't clear your cached files even if your clear the browsing data – Carlos Martinez T Oct 29 '12 at 18:10
  • I'm not sure if that's the issue I'm seeing. If I write the style outside of my media query it works in Chrome for iPad 2. It just breaks the landscape version of the site for both versions of Chrome. Although I have had issues with Chrome's caching while testing this so it helps to know that it isn't properly clearing the caches. – atxpunkrock Oct 29 '12 at 18:15
  • Update: I deleted Chrome and Reinstalled and it fixed the issue. Caching was definitely the problem. – atxpunkrock Oct 29 '12 at 19:00
  • let me just add an answer to the question, so that you can mark it as answered – Carlos Martinez T Oct 29 '12 at 20:18

1 Answers1

1

Chrome in an iPad has issues with clearing the cache, even when using the option to clear the browser data. For now the best is not to use Chrome and use Safari instead. Most of the time, the rendering in both will be the same.

Re-installing the Chrome app will temporarily clear the cache and fix the issue.

Carlos Martinez T
  • 6,458
  • 1
  • 34
  • 40