检测智能手机而不是平板电脑

发布于 2025-01-06 11:17:47 字数 185 浏览 1 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

轻拂→两袖风尘 2025-01-13 11:17:47

您的问题的有效解决方案可以在这里找到：https://github.com/sebarmeli/ JS-重定向-移动站点

回复收藏 0 原文

南…巷孤猫 2025-01-13 11:17:47

我能找到的唯一方法是进行黑客攻击，其中我：

使用 css 媒体查询来检测使用 max-device-width 的手机
< p>在此基础上设置样式的更改 - 我将机身颜色从#000000更改为#000001
使用OnLoad调用Javascript检查主体颜色。
在此基础上进行重定向。（在我自己的例子中，我实际上使用了 window.confirm 调用来为用户提供选择，而不是强制重定向）。
<前><代码><头>

电话测试
<元名称=“视口”内容=“宽度=设备宽度”>
<样式类型=“text/css”>
身体
{ 颜色: rgb(0, 0, 0);}
@media 屏幕和（最大设备宽度：600px），屏幕和（最大宽度：600px）
{
主体{ 颜色: rgb(0, 0, 1);}
}

<脚本类型=“text/javascript”>

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

注意

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

(2) 我发现类似的代码由于某种未知的原因无法检测主体背景颜色。

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

(4) 尽管主体颜色的变化是难以察觉的，但可以通过为所有 css 类等指定颜色来覆盖它。

The only way I could find to do this was a hack in which I:

Used css media queries to detect phones using max-device-width
Set a change in style on this basis - I changed body color from #000000 to #000001
Use an OnLoad to call a Javascript to check the body color.

Redirect on this basis. (In my own case I actually used a window.confirm call to offer the user a choice, rather than forcing redirection).

<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>

It detects all iPhones to 6+, and the Android and Windows phones I've tested. It discriminates against all current iPads and against the laptops and desktops I've tried.

(1) For color you must use rgb and leave spaces exactly as written.

(2) I found similar code would not detect body background-color for some unknown reason.

(3) The key to detecting the css style is to use getComputedStyle() (or currentStyle for IE) rather than getStyle().

(4) Even though the change in body color is imperceptible, it can be over-ridden by specifying colors for all your css classes etc.

回复收藏 0 原文

~没有更多了~