I've set up a WordPress website accessible only through QR codes, intending it to be accessed solely on mobile devices.
If a page of my website is accessed from a desktop, I aim to achieve the following:
- Hide all content on the webpage.
- Display a message saying: "This website is optimized for mobile phones. Please access it from your mobile device."
I've already sought some help from ChatGPT for HTML code and also tried some CSS adjustments on my own. However, neither solution seems to be working as intended. Both hide all the content of the website, including the menu, but the desired message doesn't appear. Instead, my screen remains blue, the main color of my theme.
Could someone please assist me with this issue?
First tried with HTML
<!DOCTYPE html>
<html lang="fr">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Access Verification</title>
<style>
#message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 24px;
z-index: 99999; /* Puts the message on top */
}
</style>
<script>
window.onload = function() {
// Check if the user is accessing the page from a mobile phone
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (!isMobile) {
// Display the message if the user is not accessing from a mobile phone
document.getElementById("message").innerHTML = "This site is optimized for mobile phones, please access it via your smartphone.";
document.getElementById("message").style.display = "block"; // Display the message if necessary
} else {
// Display the page content if accessed from a mobile phone
document.body.style.display = "block";
}
};
</script>
<body style="display: none;">
<div id="message"></div>
</body>
</html>
Second tried with CSS
@media only screen and (min-width: 768px) {
/* Hide header, footer, and all content on desktop */
header, #footer, .content {
display: none;
}
/* Display message */
.desktop-message {
display: block !important;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
text-align: center;
}
}
Thank you for your help!