How to serve two different html pages to mobile and desktop devices
Question
I have looked a bit here, but could only find solution for wordpress or similar.
I have a rather minimal website that features two entirely different approaches for mobile and desktop users.
Ideally, I would like to serve two completely different websites to these two categories of users. Less ideally, I would settle for serving two different landing pages to the two users.
How can I achieve this? Either php, or javascript, or any other solution would do, as long as it is fully working (ie I can reproduce it from here without going too crazy with learning new things). The simpler the better as I am not the most skilled in web development (and that's fine, this is a minor artsy project that I'm doing for fun).
EDIT:
An attempt using jquery and the code suggested
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyPage</title>
<style type="text/css">
html,body {height:100%;width:100%;margin:0;padding:0;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="mobile-container">
mobile
</div>
<div id="desktop-container">
desktop
</div>
<!-- This script switches based on the detected screen-->
<script>
$(document).ready(function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
jQuery('#mobile-container').show();
}else{
jQuery('#desktop-container').show();
}
});
</script>
</body>
</html>
1 answers
solution1
0 2020-08-28 10:14:00
You should use two different container with different html according to desktop or mobile view. By default make both container display:none
Then use jquery for change the view.
jQuery(document).ready(function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent) ) {
jQuery('#mobile-conatiner').show();
}else{
jQuery('#desktop-conatiner').show();
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.