Anonymous 0

I have the following that resizes correctly in my normal browser using media queries:

When I shrink my browser size, it resizes to the "mobile" version.

However, when I view it on my Phone, I get a "flash" of the mobile theme and then I just see my normal-sized theme instead.

Can anyone point me in the right (general) direction as to how I can fix this?

1 answer

PaulBM 103
This was chosen as the best answer

The problem is probably the virtual resolution of the iPhone screen. I'm seeing the mobile version on my LG Android phone.

Try extending your viewport meta tag to...

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no' />

Also have a read of this article, it explains the iPhone's virtual resolution. Particularly the 'A pixel is not a pixel' section.

Answered almost 8 years ago by PaulBM