Question

我有两个网页： mobile.html with mobile.css，desktop.html with desktop.css。

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

Answer 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";
}

如果您使用的是bootstrap，则可以使用此类

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

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

Answer 2

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

<?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;
}
?>

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

Answer 3

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

从移动设备查看时显示另一页

3 个答案: