Javascript 使用wordpress非响应式方法建立跨设备网站_Javascript_Php_Html_Css_Wordpress

Javascript 使用wordpress非响应式方法建立跨设备网站

javascript php html css wordpress

Javascript 使用wordpress非响应式方法建立跨设备网站,javascript,php,html,css,wordpress,Javascript,Php,Html,Css,Wordpress,我需要为我的wordpress模板找到一个解决方案，我已经为桌面分辨率的登录页编写了代码。我的目标是建立一个跨设备的网站。以前，我总是使用媒体查询使其具有响应性，但在这种情况下，我需要将其移动到一个新的级别，创建一个能够检测已使用设备（针对3类：台式机、平板电脑和手机）并加载正确版本的网站的网站，这样不仅可以更改布局，但根据需要定制网站的每个版本。到目前为止，我尝试了GITHUB上提供的device.js。它在客户端检测使用过的设备，并重定向到正确的url以打开正确版本的网站。看起来是这样的

我需要为我的wordpress模板找到一个解决方案，我已经为桌面分辨率的登录页编写了代码。我的目标是建立一个跨设备的网站。以前，我总是使用媒体查询使其具有响应性，但在这种情况下，我需要将其移动到一个新的级别，创建一个能够检测已使用设备（针对3类：台式机、平板电脑和手机）并加载正确版本的网站的网站，这样不仅可以更改布局，但根据需要定制网站的每个版本。到目前为止，我尝试了GITHUB上提供的device.js。它在客户端检测使用过的设备，并重定向到正确的url以打开正确版本的网站。看起来是这样的：

<html>
  <head>
    <!-- Every version of your webapp should include a list of all
         versions. -->
    <link rel="alternate" href="desktop.html" id="desktop"
        media="only screen and (touch-enabled: 0)">
    <link rel="alternate" href="phone.html" id="phone"
        media="only screen and (max-device-width: 640px)">
    <link rel="alternate" href="tablet.html" id="tablet"
        media="only screen and (min-device-width: 641px)">

    <!-- Viewport is very important, since it affects results of media
         query matching. -->
    <meta name="viewport" content="width=device-width">
    <script src="../build/device.js"></script>
  </head>

问题是，如果我创建这些文件（phone.php、table.php、desktop.php），index.php将进行重定向，但仍然会加载相同的页眉和页脚，所以这样做没有多大意义，因为这样就不可能自定义样式文件中除布局之外的任何内容

我还尝试在我的模板文件夹中创建3个单独的文件夹：phone、tablet和desktop，这样每个文件夹都将包含唯一的索引文件header.php和footer.php，这样就可以对网站的所有3个部分进行不同的自定义，但它不起作用。由于某种原因，这些文件夹中的Index.php文件都不会加载页眉和页脚。所以我被卡住了

如果有人有任何提示或可能正确的解决方案，我将非常感谢

一般的共识是，你应该让你的网站完全响应，而不是加载不同大小的内容。你能不能在CSS中用

display

属性显示和隐藏某些元素？事实上，我可以使用媒体查询用CSS显示和隐藏元素，但这只取决于分辨率因子（px中的显示宽度），但它无法检测正在使用的设备，平板电脑、手机或桌面，在我的情况下，我需要的网站版本打开的基础上，该设备正在使用。