10

我正在寻找检测平板电脑的完美方法。使用媒体查询,您可以为特定 CSS 设置最小和最大宽度。但是有些平板电脑的分辨率比 soms 桌面显示器更高。所以这会产生冲突。

使用 Javascript(Modernizr、Detectivizr)可以识别平板电脑,并在 HTML 中使用 HTML 标签上的“平板电脑”类进行设置。但是... 并非所有用户都启用了 Javascript。

所以你想要的是(在我看来)使用 CSS 来检测平板电脑。有谁知道这个的完美解决方案?

提前谢谢!

4

3 回答 3

4

您可以通过使用 CSS 媒体查询获得合理的准确度:

@media only screen 
and (max-device-height : 768px) 
and (max-device-width : 1024px)
{
    /* CSS Styles go here..... */
}

上面应该检测设备屏幕尺寸何时小于1024x768(桌面的常见屏幕尺寸)。

正如您在上面所说,如果您只使用 CSS 并不完美,因为某些平板电脑的屏幕尺寸大于 1024x768。

我知道提高准确性的唯一方法是使用 javascript 来嗅探userAgent字符串。请参阅 GeenHenk 链接到的问题(What is the best way to detect a mobile device in jQuery?)。

于 2013-03-22T09:27:10.160 回答
2

您可以检查navigator.userAgent, 但它的 JavaScript,如下所示:

var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);

编辑

我找到了这个:

@media only screen and (max-width: 760px) {
    /* Styles for phones */
}

这似乎可以检测浏览器的宽度是否是智能手机的大小。

有关更多信息,请参阅此问题中的答案

于 2013-03-22T08:54:40.873 回答
2

使用mobile-detect.js怎么样?我刚刚将它用于我的项目 - 它有很好的.tablet()方法。

更新(对于 maxshuty)

我通过以下方式使用它:

var md = new MobileDetect(window.navigator.userAgent);
if( md.tablet() || !md.phone() ) {
    // your code here
}
于 2015-10-21T16:20:26.760 回答