1

我正在创建网站的移动版本，但仅适用于智能手机。如果设备是平板电脑、笔记本电脑、上网本、台式机或任何类似设备，我希望用户自动访问完整站点。如果它是简单的 CSS，我会知道该怎么做。但是，移动版本使用与完整站点版本不同的模板和脚本，并且需要相应地重定向，而不是简单地使用另一个样式表。

有人有建议或文章可以说明如何检测所述设备并相应地重定向吗？

4

2 回答 2

1

我能找到的唯一方法是一个 hack，我在其中：

  1. 使用 css 媒体查询使用 max-device-width 检测手机

  2. 在此基础上设置样式的更改 - 我将体色从 #000000 更改为 #000001

  3. 使用 OnLoad 调用 Javascript 来检查正文颜色。

  4. 在此基础上重定向。（在我自己的情况下，我实际上使用了 window.confirm 调用来为用户提供选择，而不是强制重定向）。

    <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Phone test</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
    body
    { color: rgb(0, 0, 0);}
    @media screen and (max-device-width:600px), screen and (max-width:600px)
    {
        body{ color: rgb(0, 0, 1);}
    }
</style>
<script type="text/javascript">
<!--
function doPhoneCheck()
{
    var col;
    if(document.body.currentStyle)
    {
        col = document.body.currentStyle.color; // IE
    }
    else
    {
        col = getComputedStyle(document.body).getPropertyValue("color");
    }
    if(col =="rgb(0, 0, 1)")
    {
        window.location.href="http://www.apple.com/";
    }
}
//-->
</script>

它检测到所有 iPhone 到 6+，以及我测试过的 Android 和 Windows 手机。它歧视所有当前的 iPad 以及我尝试过的笔记本电脑和台式机。

注意

(1) 对于颜色，您必须使用 rgb 并按照所写的方式留出空格。

(2) 我发现由于某种未知原因，类似的代码不会检测到正文背景颜色。

(3) 检测css样式的关键是使用getComputedStyle()（或者IE的currentStyle）而不是getStyle()。

(4) 即使身体颜色的变化是难以察觉的，也可以通过为所有 css 类等指定颜色来覆盖它。

于 2014-11-30T18:43:04.907 回答
1

可以在此处找到解决问题的有效方法：https ://github.com/sebarmeli/JS-Redirection-Mobile-Site

于 2012-03-26T13:29:19.073 回答