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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -