ASP.NET MVC 5 - Razor - 根据屏幕大小呈现不同的 HTML

Question

我想根据用户是在移动设备、PC 还是平板电脑上查看来呈现不同的视图（呈现的 razor html 代码）。

例如，在桌面版中，仪表板将显示多个图表和图形以及 2 行 8 列中的一些总计（因此 16 个数字）。

现在对于移动版本，我想减少这个（即只显示可能 2 行 4 列，并隐藏 2 或 3 个图表），这将使在移动设备上查看时看起来更清晰，尽管一些细节会是丢了。

当用户点击控制器请求时，我该如何实现？我想我需要传入一些参数来指定这是否是移动视图，但我需要这些信息才能返回视图。有没有办法将屏幕分辨率详细信息传递给控制器​​？我还希望控制器返回与桌面版本使用的不同的视图模型。 （更少的数据 = 更小的视图模型切片）。

我知道推荐的方法是使用 CSS 媒体查询，但这实际上只适用于现有布局的样式，在这种情况下，我想更改布局并减少内容。

这是仪表板当前外观的链接（它不适用于移动设备）-http://kaukasusinsurgency.com/Statistics/PlayerStats?playerUCID=a68afce32e6b1f57a6c8d10da24f1516

Answer 1

您必须告知服务器浏览器客户端的大小 - 显然，在您从客户端向服务器发出请求之前，您不能这样做！

我所做的是在客户端登录页面（或其他一些默认或索引页面）中使用一段 javascript（和js-cookie）设置一个 cookie

if (matchMedia('only screen and (min-width: 992px)').matches) {
    Cookies.set(MEDIA_COOKIE, "wide");
}

然后在服务器上读取这个来决定返回什么样的内容：

var media = HttpContext.Request.Cookies["media"];
if (media != null)
{
  if (media == "wide" && format != PageFormat.Wide)
    return View("MyPage", new Viewmodel(null));
}

这应该可以工作，因为大多数人不会更改浏览器大小，但如果您需要对更改浏览器大小（即在会话期间）做出响应的东西，那么您必须在每次请求时更新 cookie。

我不会将它用于所有页面生成，但它对于不生成或减少组件中的数据非常有用。

Answer 2

您可以像这样使用 col 组设置列，然后每列将随着屏幕大小自动缩小。

<colgroup>
<col style="width: 20%" />
<col style="width: 20%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 10%" />
</colgroup>

在W3学校有更详细的解释this 或者您可以使用视口元标记

<meta name="viewport" content="width=device-width, initial-scale=1">

移动设备尝试像查看桌面一样查看页面，因此会导致屏幕缩小或缩小。这会将视图的比例更改为 [设备] (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)