[Solved] Stylesheets Dropping After iPhone Safari Reload Button Is Pushed

[timmonson]

Hi All! I am having a strange problem happen when testing my newly implemented responsive code on my iPhone5. I will start out by saying that the style sheets are loading fine initially (after the address http://www.timmonson.com is typed in to the address field and I press ‘GO’ in the bottom right corner)

The trouble comes after I click the Refresh button. The browser loads the HTML but seems to be dropping portions of my CSS (I am currently using 3 style sheets with media queries but can’t narrow it down to which ones are/aren’t loading because the problem doesn’t exist on my Macbook Pro)

I’m wondering if there is some sort of style sheet conflict…here are my style links:

<link rel="stylesheet" media="only screen and (max-device-width: 480px"), only screen and (min-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) href="500.css">
<link rel="stylesheet" media="screen and (max-width: 500px)" href="500.css">
<link rel="stylesheet" media="screen and (min-width: 500px) and (max-width: 950px)" href="950.css">
<link rel="stylesheet" media="screen and (min-width: 950px)" href="styles.css"  type="text/css">
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen">

Any help that you could provide would be so helpful! Thanks in advance. -Tim

[timmonson]

I got this working. I had 2 separate style links that were linking back to the same sheet (in this case, 500.css)
It seems that this was confusing Safari on which style sheet to load.

[Author]

Posts