我正在寻找检测平板电脑的完美方法。使用媒体查询,您可以为特定CSS设置最小和最大宽度。但有些平板电脑的分辨率高于soms桌面显示器。所以这会产生冲突。
使用Javascript(Modernizr,Detectivizr)可识别平板电脑,并在HTML标签上使用“平板电脑”类设置此平板电脑。但是......并非所有用户都启用了Javascript。
所以你想要的是(在我看来)使用CSS来检测平板电脑。有谁知道这个的完美解决方案?
提前Thanx!
答案 0 :(得分:3)
您可以使用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?)。
答案 1 :(得分:2)
结帐此link - 提供有关如何识别不同设备的详细信息。
答案 2 :(得分:2)
使用mobile-detect.js怎么样?我刚刚将它用于我的项目 - 它有很好的.tablet()
方法。
更新(针对maxshuty)
我正在以下列方式使用它:
var md = new MobileDetect(window.navigator.userAgent);
if( md.tablet() || !md.phone() ) {
// your code here
}
答案 3 :(得分:1)
你可以检查navigator.userAgent
,但是它的JavaScript,如下:
var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
我发现了这个:
@media only screen and (max-width: 760px) {
/* Styles for phones */
}
这似乎可以检测浏览器的宽度是否与智能手机的大小相同。
请参阅this问题中的答案以获取更多信息