Question

我想渲染一个不同的视图（呈现的剃刀html代码），具体取决于用户是在移动设备上查看还是PC或平板电脑。

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

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

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

我知道推荐的方法是使用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）

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

2 个答案: