如何通过媒体查询区分平板电脑与旧笔记本电脑或台式机?

时间:2012-12-05 19:08:07

标签: css3 mobile responsive-design media-queries tablet

显然有许多常见的断点,用于检测/开发移动设备和平板电脑的媒体查询屏幕大小,以及使用像素比率媒体查询检测视网膜显示的方法,但我怎样才能说明差异在没有视网膜显示器的旧款ipad或其他平板电脑与具有大致相同分辨率的笔记本电脑或小型桌面屏幕之间?

我正在使用的界面需要根据用户是使用鼠标还是触摸屏进行更改,而像水平方向的旧ipad这样的东西很容易混淆旧笔记本电脑或桌面显示器。

那么区分具有类似分辨率的移动平板电脑和旧款笔记本电脑或台式机的最佳方法是什么?

2 个答案:

答案 0 :(得分:1)

WURFLDeviceAtlas

如果您严格定位iOS平板电脑,则会在两个方向上为它们提供特定的媒体查询。

出于好奇,什么类型的UI需要不同的鼠标或触摸屏视图?我能想到的唯一原因是游戏解决方案?

答案 1 :(得分:1)

您是否可以使用modernizr库(http://modernizr.com/)来检测它是否是触摸设备并从那里开始工作?

Modernizr允许您根据触摸输入是否具有不同的CSS:

html.touch a {
   Padding:10px;
}

html.no-touch a {
   Padding:4px;
}