CODEWITHSUNDEEP
iphonecssresponsive-design
Brian Schroeter
Brian Schroeter

Reputation: 1633

Responsive Design - Site Showing Differently on iPhone versus Smaller Browser

I've added some media queries to my site here, which show correctly when I minimize the browser's window to the smallest size. Though unfortunately, when I navigate to one of the internal pages, the original design shows on the iPhone. When testing it in my browser, the site works properly regardless of what page I'm on.

Note: To test, minimize your browser to the smallest width which will show the "mobile site" that they wanted.

I'm completely stumped here. Could someone please point me in the direction as to why the iPhone seems to be loading old CSS while the browser itself is loading the current CSS?

Thanks!

Upvotes: 1

Views: 3282

Answers (2)

Nils Kaspersson
Nils Kaspersson

Reputation: 9464

Could someone please point me in the direction as to why the iPhone seems to be loading old CSS while the browser itself is loading the current CSS?

You probably answer your own question. This definitely seems like a caching issue because I see the same site on both my mobile and desktop browser.

Try clearing your mobile browser's cache. If you use Safari, go to Settings > Safari > Clear cookies and data. If you use Chrome, or any other 3rd party browser, you can usually clear local files under the in-app settings page.

Upvotes: 0

bendytree
bendytree

Reputation: 13589

Make sure you include a viewport meta tag like this:

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

Upvotes: 7

Related Questions