Browsers and devices can vary a lot, browser-specific CSS styling is one way to accomplish fine-tuning certain site designs. Even though it’s probably overkill in most situations (especially considering most modern browsers are built on Chromium), sometimes it is needed and useful. The JavaScript method below can be added to the functions.php file to add the browser class to the HTML tag.
<?php
function evo_footer_scripts() {
?>
<script>
jQuery(document).ready(function ($) {
var deviceAgent = navigator.userAgent.toLowerCase();
if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
$("html").addClass("ios");
$("html").addClass("mobile");
}
if (navigator.userAgent.search("MSIE") >= 0) {
$("html").addClass("ie");
}
else if (navigator.userAgent.search("Chrome") >= 0) {
$("html").addClass("chrome");
}
else if (navigator.userAgent.search("Firefox") >= 0) {
$("html").addClass("firefox");
}
else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
$("html").addClass("safari");
}
else if (navigator.userAgent.search("Opera") >= 0) {
$("html").addClass("opera");
}
});
</script>
<?php
}
add_action( 'wp_footer', 'evo_footer_scripts' );The result will be like the example below, allowing you to style browser-specific CSS.
<html lang="en-US" class="ios mobile safari">Add this to the CSS stylesheet to begin styling.
html.ios.mobile.safari {
/* browser-specific CSS styling goes here */
}