Question

在调查有关没有移动网站的Google SEO问题时。我最近了解到，缺少合适的移动网站会降低搜索评分，移动和桌面网站的不同内容也可能会损害您的搜索引擎优化。

目前，我们有一个MVC网站，其设计不具备响应能力。我不想创造需要更多维护的东西。（IE新移动网站或为移动版本创建新视图..）。

我已经了解到，将网站转换为具有响应能力在技术上是可行的，但不建议出于以下两个原因：

当前网站在小屏幕上可能效果不佳。（CSS问题，修改CSS可能会带来痛苦和风险）。
我们在当前网站上有太多东西。

谷歌搜索时，我发现这是最好的方式。 对桌面和移动浏览器使用相同的控制器和视图，但根据设备类型使用不同的Razor布局呈现视图。此选项需要新的CSS和移动设备的新_Layout页面。 然后将_ViewStart修改为

Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_LayoutMobile.cshtml" :"~/Views/Shared/_Layout.cshtml";

我想继续采用上述方法，但如果任何人有这方面的经验，我想知道实现这一目标的最佳实践，推荐方法和技术可能性。

Answer 1

处理响应式设计通常有三种方法：

使用响应式设计框架
使用CSS媒体查询
使用百分比

使用这些内容的难易程度最终将取决于您现有项目的复杂程度以及您愿意做多少改变以使其响应。

考虑响应式设计框架（基本上修改和更新现有项目的所有标记）

这将允许您的网站或应用程序基本上在任何设备上运行（并且看起来很好），无论平台是什么，只要它有一个互联网浏览器来访问它并将使它更容易开发，因为您只需要在一个区域内创建您的页面，响应式设计的美妙之处在于它将根据当前平台和设备适当地设置您的页面样式。

它不是非常自动的，你可能不得不修改它以使一切正常工作并且看起来应该如此，但它可能是处理这种情况的最佳方法（取决于您正在使用的控件）。您可以使用Reponsive Design框架和样板来在您的网站中实施这些框架，例如Twitter Bootstrap。

这些可以很容易地集成到Web窗体，MVC或Web页面中，基本上就是您需要使用的所有内容：

此处使用框架的主要问题是您已经设计并启动并运行了您的网站。当您从项目开发开始使用它们时，这些框架的工作效果非常好，但是在尝试迁移现有项目以使用它们时，它们将需要更多的工作。

这些框架具有非常特定的类和样式，实际上在响应式设计方面做了大量不同的事情，您必须使用这些新类来替换基本上所有现有的类。它不会是最简单的迁移，但它无论如何都不可能，并且是我的推荐。

使用CSS Media Queries（如果您想在没有框架的情况下处理创建此响应，但您需要做更多工作，则需要这样做）

您也可以使用CSS媒体查询来完成此操作，CSS媒体查询会相应地针对特定的分辨率和屏幕尺寸以及样式元素，但这需要更多手动，您必须为您要定位的每种尺寸编写查询。 / p>

这些将比使用框架花费更多的工作，因为您必须编写查询以定位所需的所有不同主要分辨率，然后在每个内部实际上手动调整一些元素。您必须基本上为要定位的每个分辨率创建一个迷你样式表或媒体查询，并手动输入您要用于该特定分辨率的值。

我已经完成了更多这样的事情，并亲自动手了＃34;之前的响应式设计形式，但是让一些框架为您处理它的尝试和证明要容易得多。查看以下非常简单的示例，该示例将演示CSS媒体查询的工作原理：

        <style type='text/css'>
  /* Only affects 1600px width */
  @media only screen and (max-width: 1600px){ body { background: green; }}
  /* Only affects 1200px width */
  @media only screen and (max-width: 1200px){ body { background: blue; }}
  /* Only affects 900px width */
  @media only screen and (max-width: 900px){ body { background: yellow; }}
  /* Only affects 600px width */
  @media only screen and (max-width: 600px){ body { background: purple; }}
  /* Only affects 400px width */
  @media only screen and (max-width: 400px){ body { background: orange; }}
     </style>

当您调整浏览器/窗口的大小时，将相应地应用样式。

Example（Editable Example）

使用百分比（另一个选项提供＆＃34;响应＆＃34;感觉，但它也需要CSS媒体查询才能真正＆＃34;响应＆＃34;）

您还可以考虑迁移所有内容以使用基于百分比的大小调整而不是显式像素大小，但这比实现上述媒体查询要多得多。

这基本上要求您使用百分比来缩放网站上的所有内容，并定义项目的最小和最大高度和宽度。您可能不得不将此与媒体查询结合使用，以获得真正有效的解决方案。

Answer 2

默认情况下，ASP.NET MVC应用程序使用Bootstrap响应。

http://weblogs.asp.net/jongalloway/two-free-video-courses-intro-to-asp-net-mvc-and-responsive-ui-with-bootstrap

将MVC网站转换为响应

2 个答案: