从移动设备查看时显示另一个页面答案

【问题标题】：Display another page when viewed from mobile从移动设备查看时显示另一个页面
【发布时间】：2017-12-26 01:07:58
【问题描述】：

我有两个网页： mobile.html 与 mobile.css 和 desktop.html 与 desktop.css。

如果屏幕尺寸小于 12 英寸，我如何重定向到移动设备（默认页面是 desktop.html）。

【问题讨论】：

【解决方案1】：

不建议这样做，最好的方法是使用媒体查询来使您的网站具有响应性。通过添加类并检测浏览器宽度变化。

<div class=" mobilehidden">
       <p>This text is hidden in mobile</p>
</div>

现在在 Css 中加入这一行

@media only screen and (max-width: 500px){
.mobilehidden{
      display = none;
}
}

如果你想这样做，那么你可以使用 JavaScript。您也可以使用 php ,css 但 JavaScript 更容易。只需在脚本标签内使用它

if (screen.width <= 700) {
     document.location = "samplepage.html";
}

如果您使用的是引导程序，则有一个用于此的类

.visible-xs-* 
.visible-sm-*

上面提到的 sm 适用于平板电脑，而 xs 适用于移动设备。

【讨论】：

【解决方案2】：

您可以使用 PHP 完成此操作，使用轻量级类，例如 Mobile Detect。下载并添加到网站根目录中的服务器后，您可以使用此代码检测设备是否为移动设备并将位置设置为移动网站的 url：

<?php 
/* Change path info depending on your file locations */
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;

if($detect->isMobile()) {
    header('Location: http://mobile.example1.com/');
    exit;
}
?>

可以检测到其他设备，可以找到更多示例here

【讨论】：

【解决方案3】：

您不必更改页面，只需使用引导程序使页面响应，如果您在 youtube 上看不到学习教程，我希望您知道引导程序。

【讨论】：

它是响应式的，但移动版和桌面版的内容完全不同。所以响应式设计不是问题。
这没有回答问题。