- <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>移动专属页面</title> <script> // 页面加载完成后执行 document.addEventListener('DOMContentLoaded', function() { // 检测是否为移动设备 function isMobileDevice() { return (typeof window.orientation !== 'undefined') || (navigator.userAgent.indexOf('IEMobile') !== -1); } // 如果不是移动设备,则显示404页面 if (!isMobileDevice()) { // 创建404页面内容 document.body.innerHTML = ` <style> .error-container { text-align: center; padding: 50px; font-family: Arial, sans-serif; } .error-code { font-size: 100px; color: #333; margin-bottom: 20px; } .error-message { font-size: 24px; color: #666; margin-bottom: 30px; } </style> <div class="error-container"> <div class="error-code">404</div> <div class="error-message">页面不存在</div> </div> `; } }); </script> <style> /* 移动设备样式 */ body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background-color: #f9f9f9; } .mobile-content { max-width: 100%; margin: 0 auto; text-align: center; } h1 { color: #333; } p { color: #666; line-height: 1.6; } </style></head><body> <!-- 移动设备显示内容 --> <div class="mobile-content"> <h1>欢迎访问移动专属页面</h1> <p>此页面专为移动设备,在电脑上无法显示。</p> </div></body></html>
复制代码 |