Css 如何通过媒体查询将平板电脑与老式笔记本电脑或台式机区分开来?

Css 如何通过媒体查询将平板电脑与老式笔记本电脑或台式机区分开来?,css,mobile,responsive-design,media-queries,tablet,Css,Mobile,Responsive Design,Media Queries,Tablet,显然,对于移动设备和平板电脑,媒体查询屏幕尺寸有很多常见的断点需要检测/开发,以及使用像素比媒体查询检测视网膜显示的方法,但是,我如何区分旧款ipad或其他没有视网膜显示器的平板电脑与分辨率大致相同的笔记本电脑或更小的台式机屏幕之间的区别呢 我正在使用的界面需要根据用户是否有鼠标或触摸屏进行更改,而像水平方向的旧ipad这样的东西很容易与旧笔记本电脑或桌面显示器混淆 那么,区分移动平板电脑和分辨率相近的老式笔记本电脑或台式电脑的最佳方法是什么呢 如果您严格以iOS平板电脑为目标,那么在这两个方向

显然,对于移动设备和平板电脑,媒体查询屏幕尺寸有很多常见的断点需要检测/开发,以及使用像素比媒体查询检测视网膜显示的方法,但是,我如何区分旧款ipad或其他没有视网膜显示器的平板电脑与分辨率大致相同的笔记本电脑或更小的台式机屏幕之间的区别呢

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

那么,区分移动平板电脑和分辨率相近的老式笔记本电脑或台式电脑的最佳方法是什么呢

如果您严格以iOS平板电脑为目标,那么在这两个方向上都有特定的媒体查询


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

你能使用Modernizer库吗(http://modernizr.com/ )检测它是否是一个触摸设备并从那里工作

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

html.touch a {
   Padding:10px;
}

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

一种幻灯片放映界面,根据用户是否有鼠标或触摸屏,需要不同大小的按钮和其他UI元素。我的目标是任何可能的平板电脑,但我并不完全了解我的受众,除了他们使用平板电脑,而且允许他们使用的设备越多越好。问题在于区分具有一定屏幕尺寸范围的平板电脑和与之相当(如果屏幕尺寸不相同的话)的老式笔记本电脑或台式电脑。根据Modernizer的说法,它们的触摸只表明浏览器是否支持它,正如我所收集的,这并不一定意味着他们在使用平板电脑。是的,这并不是一个简单的解决方案,而是一个很好的结果,只需要很少的努力!