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

Question

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

如果屏幕尺寸小于 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";
}

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

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

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