css - Javascript Mobile sites -
i using following javascript detect whether site viewed on mobile device works redirect (see example 1);
however, possible amend amends font size of element or class (the original font-size contained within external style sheet) when same condition satisfied, being idevice detected.
//original code: (javascript) // idevice var idevice = { // android android: function() { return navigator.useragent.match(/android/i); }, // blackberry blackberry: function() { return navigator.useragent.match(/blackberry/i); }, // apple ios: function() { return navigator.useragent.match(/iphone|ipad|ipod/i); }, // opera browser opera: function() { return navigator.useragent.match(/opera mini/i); }, // windows mobile windows: function() { return navigator.useragent.match(/iemobile/i); }, // function: (idevice) any: function(){ return (idevice.android() || idevice.blackberry() || idevice.ios() || idevice.opera() || idevice.windows()); } }; <!-- working html --> { if( idevice.any() ) window.location = "http://www.stackoverflow.com"; }
one possible solution modify javascript adds 1 or more custom classes 'body' element in html based on device agent. then, in css, this:
.header { /* default font size */ } .android .header, .iphone .header .mobile .header { /* custom font size */ }
however, better solution might forgo user agent detection , instead use media queries make website responsive based on actual width of device user using view website.
Comments
Post a Comment