Question

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

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

我编写了一个新的样式表，在必要时覆盖这些样式，使用max-width媒体查询以纵向模式在手机和平板电脑上运行良好。

问题在于，当您将平板电脑转为横向模式时，屏幕变为1024px宽，这是桌面样式应该接管的地方。然而，平板电脑仍然是一个触摸设备，我觉得“移动”风格更适合平板电脑（更大的水龙头目标，更好的表格字段和标签布局，画布菜单等）。由于你旋转了设备，一个网站突然改变似乎很笨拙和迷茫。

我应该根据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
}

我们还应该记住，并非所有移动设备都支持触控功能，例如某些Blackberry手机，因此根据modernizr添加的.touch类启用某些功能/样式也可以提供帮助。