时间戳

首页 > 解决方案 > 如何为移动和桌面设备提供两个不同的 html 页面

php - 如何为移动和桌面设备提供两个不同的 html 页面

问题描述

我在这里看了一点，但只能找到 wordpress 或类似的解决方案。

我有一个相当小的网站，它为移动和桌面用户提供了两种完全不同的方法。

理想情况下，我想为这两类用户提供两个完全不同的网站。不太理想的是，我会满足于为两个用户提供两个不同的登录页面。

我怎样才能做到这一点？php、javascript 或任何其他解决方案都可以，只要它完全正常工作（即我可以从这里复制它而不会因为学习新事物而过于疯狂）。越简单越好，因为我在 Web 开发方面不是最熟练的（这很好，这是我为了好玩而做的一个小艺术项目）。

编辑：

尝试使用 jquery 和建议的代码

<!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>

标签： phphtmlcss

解决方案

您应该根据桌面或移动视图使用具有不同 html 的两个不同容器。默认情况下，使两个容器都显示：无

然后使用 jquery 更改视图。

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();
   }
});

推荐阅读