asp.net - 使用应用主题时，如何最好地处理移动和桌面 CSS 检测

Question

我目前有一个 Web 应用程序，它使用 Themes 将其设置为 SkinA 或 SkinB。到目前为止，这是一个不以任何方式关注移动设备的 Web 应用程序，因此 site.css 文件(在两个 Theme 文件夹中)针对的是普通桌面设备。

但是，在不更改整个元素中的任何 Web 表单 aspx 文件的情况下，我现在需要创建此 site.css 文件的移动版本(适用于两个主题)，它将改变布局，使其看起来更干净一些在移动设备上查看时。

我在一篇听起来相当合乎逻辑的文章中发现了以下片段，但是，由于使用了主题文件夹(从我对主题的了解来看，我认为所有 CSS 文件都会自动包含)，我不确定如何我会做到这一点。

摘自:http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/#mobile-stylesheets

首先，定义两个样式表:screen.css 包含普通浏览器的所有内容，antiscreen.css 用于覆盖您在移动设备上不需要的任何样式。将这两个样式表绑定(bind)到另一个样式表 core.css 中:

@import url("screen.css");
@import url("antiscreen.css") handheld;
@import url("antiscreen.css") only screen and (max-device-width:480px);

最后，为移动浏览器定义另一个样式表 handheld.css 并在页面上链接它们:

<link rel="stylesheet" href="core.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)"/>

或者也许有更好的方法来完成这个，同时保留主题的使用？

Answer 1

我在目前正在做的元素中遇到过这个问题。

实现此目的的一种方法是使用 Modernizr。

这是一个 javascript 库，您可以在 modernizr.com 上获得。

它将测试目标浏览器，如果它支持触摸事件，它将向您的网页元素添加“触摸”样式。一般来说，如果 Modernizr 这样做，要么是平板电脑，要么是手机。然后，您为手机/平板电脑的每种样式添加“.touch”前缀。

将其与媒体查询相结合，您应该能够处理大多数(可能不是全部)设备。