2014-09-12, 11:12 AM
I've added an "@media only screen and (max-device-width : 480px)" section to global.css
The plan is to use this standard css technique to override the normal css rules when a mobile device is detected.
As a simple test, I'm just changing the background colour to check that the mobile device is "seeing" the section within the "@media only screen and (max-device-width : 480px)" area of the style sheet.
It sort of works.
When I land on a test page I see the nice pink background indicating that my mobile device has been detected and the correct section of css has been rendered.
If I switch the device into landscape mode the nice pink background is still displayed...for a while....
After about 5-10 seconds the device reloads the page (without me doing anything) and this time the normal, non-mobile version (with the standard non pink background) is displayed?
I am confused?
Is there some sort of caching going on somewhere? This should work.
Any ideas?
The plan is to use this standard css technique to override the normal css rules when a mobile device is detected.
As a simple test, I'm just changing the background colour to check that the mobile device is "seeing" the section within the "@media only screen and (max-device-width : 480px)" area of the style sheet.
It sort of works.
When I land on a test page I see the nice pink background indicating that my mobile device has been detected and the correct section of css has been rendered.
If I switch the device into landscape mode the nice pink background is still displayed...for a while....
After about 5-10 seconds the device reloads the page (without me doing anything) and this time the normal, non-mobile version (with the standard non pink background) is displayed?
I am confused?
Is there some sort of caching going on somewhere? This should work.
Any ideas?