How to manually override CSS @media queries? -
i have made mobile optimised style sheet site client using:
<link rel="stylesheet" type="text/css" media="screen , (max-device-width : 768px)" href="css/mobile.css" />
this works fine have requested link show site original, full page format.
does know way re-load site , override media query above? way javascript?
personally favour solution whereby stylesheet link conditionally rendered via logic in code behind of page triggered user selection. it's not clean, possibly achieve using javascript too. maybe along lines of giving stylesheet link id:
<link id="mobilestyles" rel="stylesheet" type="text/css" media="screen , (max-device-width : 768px)" href="css/mobile.css" />
then calling function disable stylesheet button event handler:
jquery
$("#mobilestyles").remove();
plain js
document.mobilestyles[0].disabled = true;
you store user's selection cookie , remember future visits.
Comments
Post a Comment