Multiple või different stylesheets erinevate seadmete/veebilehitsejate jaoks ja browser detect javascript/jQuery

  |   by kadriad   |   Blogi, javascript, jQuery, php, wordpress  |  No Comments

Täiendus – 12.11.2012:

Siin veel täiendus eelnevatele skriptidele – oli vaja javascriptis/jQuery välja selgitada, kas on tegemist IE7-ga.

Siin ka Microsofti enda ameltik skript, mida kergelt modisin:

function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
 
function checkVersion()
{
//var msg = "You're not using Internet Explorer.";
var ver = getInternetExplorerVersion();
 
if ( ver > -1 )
{
if ( ver >= 8.0 ) {
//msg = "You're using a recent copy of Internet Explorer."
var verseven = false;
}else{
// msg = "You should upgrade your copy of Internet Explorer.";
var verseven = true;
}
}
// alert( msg );
return verseven;
}

Algmaterjali sain siit:

http://stackoverflow.com/questions/280879/how-can-i-determine-which-version-of-ie-a-user-is-running-in-javascript

 

 

Täiendus:

Oli vaja, et ainult mobiilis näitaks mobiiliteemat, mujal mitte, seega css-s ei saanud kasutada min-width, kuna sellega ujub leht ka tavalistes browserites, kui akent venitada/vähendada.

Siin ka jQuery skript:

http://css-tricks.com/resolution-specific-stylesheets/

Minu modifikatsioon:

if( navigator.userAgent.match(/Android/i)
//|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)//test
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
){
//use another stylesheet
$("#size-stylesheet").attr("href", "style_mobile.css");

}//end if browser

Ja html-s:


Varasem 23. märts 2011

Suures tööhoos avastasin juhuslikult, et IE-ga ei näe leht sugugi mitte sama hea välja kui näiteks Chrome, Firefoxiga.

Kuna kasutatud oli palju elemente, mida IE lehitseja ei toeta, siis arvasin, et mõistlikum on IE puhul kasutada oma stylesheet-i.

Selleks oli kõigepealt vaja pluginat, mis ütleks missuguse veebilehitsejaga on tegemist.

Mina kasutasin järgnevat WordPressi pluginat:

http://wordpress.org/extend/plugins/php-browser-detection/

Nagu seletustest kirjas on võimalik ka veebilehitseja versiooni kontrollida.

Peale plugina aktiveerimist tuleb soovitud käsurida sisestada koodi.

Kuna mind huvitas stylesheet, siis tuli muudatused teha teema all olevas header.php failis. (Algul arvasin, et WP nõuab selleks puhuks väga peent lahendust, kuid toetudes järgnevale blogipostitusele:

http://www.derekdesigns.com/using-multiple-stylesheets-with-wordpress

tegin ka soovitud muudatused lihtsalt header.php-s.

Kuna mind huvitas IE (Internet Explorer), siis nägi kood välja järgnev:

<!--?php if ( is_IE() ) { ?-->

 <!--?php }else { ?-->

 <!--?php }//end if else ?-->