移动支持 – ASP.NET MVC 4 系列 - SkySoot - 博客园

来源: 移动支持 – ASP.NET MVC 4 系列 – SkySoot – 博客园

       目前,有各种各样的方法可以提高网站应用程序的移动体验。在某些情况下,我们只想在小规格上做一些微小的风格变化;另一些情况下,我们可能完全改变外观显示或者一些视图的内容;最极端的情况下,我们可能重新创建一个专门针对移动用户的 Web 应用程序。针对这些情况,MVC 4 提供了如下几种方案:

  • 适应性呈现:默认的 Internet 和 Intranet 应用程序模板使用 CSS 媒体查询(CSS media queries)来缩小到较小的移动规格(mobile form factors)。
  • 显示模式:MVC 4 采用了基于约定的方法,可以根据发出请求的浏览器选择不同的视图。与适应性不同,显示模式允许我们改变发往移动浏览器的标记!
  • Mobile Project 模板:这个新的项目模板帮助创建只针对移动设备使用的 Web 应用程序。

 

适应性呈现

       image   image

       MVC 4 默认模板在移动浏览器中做了很多处理,显而易见,页面智能的根据移动设备屏幕尺寸进行缩放,而不是简单的缩小页面尺寸(收缩文本和其他元素),为了能在移动设备上使用,页面进行了重绘。页面利用的是两个普遍支持的浏览器功能:

       Viewport 元标记

           基于浏览器嗅探或用户选择,Viewport 标记只在那些专门为小规格设计的页面中使用。这种情况下,我们按如下方式使用 Viewport 标记:

       <meta name=”viewport” content=”width=320″ />  // 不适用于大尺寸页面

           一个更好的解决方案是把我们的 CSS 扩展到各种规模,然后告诉浏览器支持任意设备!这很容易实现:

       <meta name=”viewport” content=”width=device-width” />

       CSS 媒体查询的自适应样式

           我们已经告诉浏览器页面足够智能,可以自动缩放到当前设备的屏幕尺寸。但如何兑现这一承诺呢?答案是 CSS 媒体查询。CSS 媒体查询允许我们在特定的媒体(显示)功能指定 CSS 规则,CSS 规则进行自上而下的评估,我们可以在 CSS 文件的顶部应用一般的规则,用专门在 CSS 中进行小规格显示的规则进行重写,并且媒体查询环绕这些规则,以使它们不能在大规格显示的浏览器中使用

 

       列举一个非常简单的示例,当宽度大于 850px 的屏幕上显示时,背景是蓝色,否则红色。CSS 如下:

body {
    background-color: blue;
}
 
@media only screen and (max-width:850px) {
    body {
        background-color: red;
    }
}

image

image

 

显示模式

       MVC 4 中的视图逻辑已经改变,添加了基于约定的替代视图。当浏览器用户代理显示是一个已知的移动设备时,默认的视图引擎首先查找名称以 .Mobile.cshtml 结尾的视图。例如,桌面浏览器请求主页时,应用程序使用 Views\Home\Index.cshtml 模板,而当移动浏览器请求主页时,程序就会使用 Views\Home\Index.Mobile.cshtml 模板。这些都由约定来处理,我们不必配置或注册

       (这里不方便测试就不贴图了,有兴趣的朋友可以下载移动浏览器模拟器来启动项目自行测试)

 

Mobile Project 模板

       如果需要创建只针对移动浏览器使用的应用程序,可以使用 Mobile Site 模板来创建新应用程序。该模版为我们创建的网站预先配置使用 JQuery Mobile 库,这个库为移动 Web 应用程序提供了大量增强功能:

  • 用户界面采用触摸优化的 UI 小部件
  • 为主要的移动浏览器而设计,并通过了测试
  • Ajax 导航提供了动画页面过渡,使其在低带宽的情况下,依然保持良好的性能
  • 通过主题支持,我们可以使用 CSS 主题重置整个网站的皮肤
  • 列表视图使用移动友好的接口,为浏览和操纵信息列表提供了很好的用户体验

image image image

       Mobile Project 模板可以开发强大的 JQuery Mobile ASP.NET MVC 应用程序,但这需要深入了解 JQuery Mobile。可以参考一些学习资料:

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏