0

In landscape orientation on the iPhone 6 Safari renders the desktop styles rather than the mobile styles despite the fact I have adjusted my media query ranges according to the new iPhone dimensions. In portrait mobile styles are displayed as expected.

When I rotate the phone from portrait to landscape the mobile styles are seen briefly before being overridden and the desktop styles are seen.

When using Chrome the website behaves as expected in landscape and the mobile styles are rendered.

The website is built using Zurb Foundation 5. Is there a way to force Safari to obey the media queries?

Thanks in advance

Live link

EDIT:

The problem seems to be that Chrome and Safari interpret the meta viewport tag differently.

This is my original code which works fine in Chrome, and Safari in portrait.

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

Changing to this makes Safari display correctly although there is zooming in both Chrome and Safari as there is no scaling at all.

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

Adding any of these: initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, cause Safari to display the desktop styles but Chrome to behave as expected i.e mobile styles in both portrait and landscape without zooming.

Is there a way to conditionally load different viewport meta tags targeting different browsers?

Mike_Amis
  • 11
  • 1
  • 3

2 Answers2

0

I think you can use javascript for browser and/or feature targeting, then change the meta tag on the fly as described in this article:

Can I change the viewport meta tag in mobile safari on the fly?

Community
  • 1
  • 1
pastorello
  • 982
  • 10
  • 23
  • Thanks, that looks like it will work for me. I'm compromising at the moment which is displaying the correct styles but the zooming is not ideal. When I try it I'll report back. – Mike_Amis Feb 13 '15 at 16:18
0

Try @media only screen and (min-width: 375px) and (max-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

Most online say to have min-device-width and max-device-width and I never got that to work. Took out the " device and it works now.

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Trey Phillips
  • 1
  • 1
  • This is old but `device-width` was deprecated. Which is why `min-device-width` and `min-device-height` no longer work. – Shivam Sinha Dec 02 '19 at 23:25