我们使用以下 HTML 元标记和样式查询来允许我们定位 iPad/Safari 浏览器（与 windows/linux 浏览器相比，iPad 的一些细微变化）：
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="style/tablet.css" />
但是，tablet.css 文件也被加载到较小的笔记本电脑上（即那些小于 1024 像素的笔记本电脑）——而且在放大更大的屏幕时似乎也发挥了作用。
使用设备宽度不是区分实际设备/浏览器的好方法，但我在互联网上的所有搜索都表明这是最好的方法。
还有其他方法吗？
为此，您必须恢复为 javascript
您可以使用modernizr 来检测触摸事件支持
http://modernizr.github.com/Modernizr/touch.html
Modernizr 将向<html>标签添加一个类，因此您可以非常轻松地定位支持触摸的设备。
如果您想要更准确，或者使用 javascript 检测用户代理，但它需要定期更新以进行更新和新的平板电脑操作系统版本。
使您的@media 查询更细粒度将有助于更好地清除不需要的设备/浏览器：
<link rel="stylesheet" media="only screen and (max-device-width: 1024px) and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2)" href="style/tablet.css" />
使用-webkit-min-device-pixel-ratio:andorientation比屏幕尺寸更具体到 iPad/Phone。