On my website, I am utilizing the Mobile ESP script to determine whether visitors are accessing it from a mobile device or desktop. Depending on the type of device, I dynamically load the necessary scripts and CSS stylesheets for optimal navigation.
However, I am facing an issue where I need to load a script at the bottom of the body tag for it to function correctly. Is there a method to achieve this?
<head>
<script type="text/javascript">
if (MobileEsp.isTierIphone || MobileEsp.isTierTablet || MobileEsp.isMobilePhone) {
var cssUrl = "css/mobilePortraitStyle.css";
$(document.head).append(
$("<link/>")
.attr({
rel: "stylesheet",
type: "text/css",
media: "screen and (orientation:portrait)",
href: cssUrl
})
);
var cssUrl = "css/mobileLandscapeStyle.css";
$(document.head).append(
$("<link/>")
.attr({
rel: "stylesheet",
type: "text/css",
media: "screen and (orientation:landscape)",
href: cssUrl
})
);
}
else {
var cssUrl = "css/desktopStyle.css";
$(document.head).append(
$("<link/>")
.attr({
rel: "stylesheet",
type: "text/css",
href: cssUrl
})
);
var jsUrl = "js/skrollr.min.js";
$(document.head).append(
$("<script/>")
.attr({
src: jsUrl
})
);
}
</script>