如何使用 JavaScript 和 CSS 将页面重定向移动设备版本-之路教程

JavaScript 方法

此方法需要在 <head> 部分中添加一些 JavaScript 代码。

写下你的网址，并其中插入以下JS代码。
当屏幕宽度等于或者小于 699px 时，域将重定向到移动 URL：

<script type="text/javascript">
  if (screen.width <= 699) {
    document.location = "onitroad.com";
  }
</script>

并非所有手机都支持 JavaScript 方法。
此外，在上包含一个链接，以便用户访问移动版本。

我们也可以使用“用户代理”方法来实现相同的结果。
“user-agent”检测的优势在于我们可以为许多设备进行自定义。

这是 iPhone 和 iPod 的“用户代理”检测：

<script type="text/javascript">
  if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    location.replace("http://mobile.onitroad.com");
  }
</script>

如何使用 JavaScript 和 CSS 将页面重定向移动设备版本

随着平板电脑和智能手机用户的增长，让用户可以选择将桌面版本切换到移动版本变得至关重要。
使用一些 JavaScript 代码或者 CSS @media 方法的帮助很简单。

CSS @media 方法

我们可以使用 CSS @media 方法来检测浏览器。
在 <head> 部分实现两个 CSS @media "screen" 和 "handheld"：

<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld"/>

CSS @media 规则是一种用于检测移动浏览器的内置方法。
它根据浏览器窗口大小显示 CSS 样式。
这不需要单独的移动站点。
我们只需要一个网页中的两个样式表：“屏幕”媒体类型（桌面显示器）和“手持”媒体类型（智能手机）。

日期：2020-06-02 22:16:24 来源：oir作者：oir

←如何使用 JavaScript 重定向网页

如何使用 JavaScript 重新加载页面→

JavaScript 方法

CSS @media 方法

目录