我设置了一个只能通过二维码访问的 WordPress 网站，打算只能在移动设备上访问。
如果从桌面访问我网站的页面，我的目标是实现以下目标：
我已经向 ChatGPT 寻求了 HTML 代码的一些帮助，并且自己也尝试了一些 CSS 调整。然而，这两种解决方案似乎都没有按预期工作。两者都隐藏了网站的所有内容，包括菜单，但不会显示所需的消息。相反，我的屏幕仍然是蓝色，这是我主题的主要颜色。
有人可以帮我解决这个问题吗？
首先尝试使用 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>
第二次尝试使用 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;
}
}
谢谢您的帮助！
有人可以帮助我吗？ :)
我尝试了各种解决方案，但到目前为止都没有效果。任何帮助将不胜感激。
谢谢！