If you're looking to achieve a specific goal, I recommend checking out this resource that shares similarities with what you have in mind: Prevent a video background from being downloaded on mobile browsers
To detect mobile devices, you can utilize the following code snippet:
function detectmob() {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
// Perform actions specifically for mobile devices
}
else {
// Handle non-mobile device scenarios
}
} // detectmob
----------[ EDIT ]----------
var width = window.innerWidth;
var height = window.innerHeight;
if (width > 480) {
// Execute mobile-specific code
} else {
// Implement other code
}
----------[ EDIT ]----------
To segregate content based on device type, create two separate files named mobile.html and desktop.html, assigning appropriate content to each one. Then, add the following javascript at the end of your main page:
function getFileContent(file) {
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function () {
if (rawFile.readyState === 4) {
if (rawFile.status === 200 || rawFile.status == 0) {
var fileContent = rawFile.responseText;
document.getElementsByTagName("body")[0].innerHTML = fileContent;
}
}
}
rawFile.send(null);
}
You can now use the above script to retrieve file contents and display them based on whether the visitor is using a mobile device or computer:
var width = window.innerWidth;
var height = window.innerHeight;
if (width > 480) {
// Execute mobile-specific code
getFileContent("mobile.html");
} else {
// Implement other code
getFileContent("desktop.html");
}
That's the entire process! If you require further assistance, feel free to reach out.