基于触摸功能而不是视口媒体查询的样式？

Question

tl;dr: 将“移动”CSS 限定在 .touch 类下（由 Modernizr 添加）而不是基于视口大小的媒体查询是否有意义？

我正在为仅设计为桌面的网站创建移动样式（即页面固定在 ~900 像素宽，许多目标太小而无法触摸等）。该网站有 很多 表格、一些表格，但没有图像/视频/图表。我无法控制 HTML 结构（我想避免使用 JS 除外），也无法对现有桌面样式进行有意义的更改。

我编写了一个新的样式表，它在必要时覆盖了那些样式，以使其在手机和平​​板电脑上使用max-width 媒体查询以纵向模式正常工作。

问题在于，当您将平板电脑切换到横向模式时，屏幕会变为 1024 像素宽，而这正是桌面样式应该接管的地方。然而，平板电脑仍然是一种触摸设备，我觉得“移动”风格更适合平板电脑（更大的点击目标、更好的表单字段和标签布局、非画布菜单等）。仅仅因为您旋转了设备，网站就突然发生变化，这似乎非常笨拙和迷失方向。

我是否应该在 Modernizr 添加的 .touch 类而不是视口宽度下限定移动样式？从表面上看，这听起来不是一个坏主意，但是我再次知道基于视口的媒体查询是编写样式的正确方法，所以我不禁觉得我会遇到麻烦。

Answer 1

您可以使用 Modernizr 在要加载的两个样式表之间进行选择。

在一个名为 small-enough.css 之类的文件中，根据平板电脑纵向尺寸和向下的媒体查询导入您的移动样式。发现文档here。只要有这一行就行了。

    @import path/your-mobile-styles.css @media (max-width: [tablet portrait width]);

如果是触摸设备，那么使用modernizr 只需加载移动样式即可。如果不是触摸加载，则使用媒体查询决定加载移动样式的文件。

    Modernizr.load({
      test: Modernizr.touch,
      yep : 'your-mobile-styles.css',
      nope: 'small-enough.css'
    });

Answer 2

您可能可以使用媒体查询来定位这些设备

@media only screen and and (min-device-width:~whatever~) and (max-device-width:1024px) and (orientation:landscape) {
  styles
}

我们还应该记住，并非所有移动设备都支持触控，例如某些黑莓手机，因此基于modernizr 添加的 .touch 类启用某些功能/样式也会有所帮助。