怎么创建移动页面应用程序（上）——单纯唠唠理论

目录

怎么创建移动页面应用程序（上）——单纯唠唠理论
怎么创建移动页面应用程序（下）——唯快不破，实战为先

概述

移动设备 — — 智能手机、 功能手机和平板电脑 — — 继续流行的手段来访问网站的方式。对于许多 web 开发人员和面向 web 的企业，这意味着它是越来越重要，为使用这些设备的用户提供一个好的用户体验。

如何早期版本的 ASP.NET 支持移动浏览器

ASP.NET 版本 2.0 至 3.5 包括ASP.NET 移动控件: 一套用于移动设备在System.Web.Mobile.dll程序集和System.Web.UI.MobileControls命名空间中的服务器控件。这个程序集存在 ASP.NET 4 中，但它已被否决。开发人员应尽量将迁移到更先进的方法，在本文所述的那些。

为什么 ASP.NET 移动控件已标记为已过时的原因是他们的设计围绕手机共有的周围 2005年及更早版本。控件是主要设计来呈现 cHTML 或 WML 标记 (而不是普通的 HTML) 为 WAP 浏览器的那个时代。但 WAP、 WML 和 cHTML 不再是目前大多数项目，因为 HTML 现已成为移动和桌面浏览器一样的无处不在的标记语言。

今天支持移动设备的挑战

即使移动浏览器现在几乎普遍支持 HTML，你将仍然面临许多挑战，致力于创造伟大的移动浏览体验的时候:

• 屏幕大小-移动设备不同的形式，和他们的屏幕往往远远小于桌面显示器。因此，您可能需要为他们设计完全不同的页面布局。
  
• 输入方法— — 某些设备有键盘、 一些有铁笔，其他人使用触摸。你可能需要考虑多个导航机制和数据输入的方法。
  
• 标准法规遵从性— — 许多移动浏览器不支持最新的 HTML，CSS 或 JavaScript 标准。
  
• 带宽— — 手机网络性能差别非常大，而且国内一些运营商最终以兆字节来收费。因此没有万能的解决方案;你的应用程序将不得不考虑根据不能的访问设备来定义行为和其外观

通常最初接近第一次的移动浏览器支持的开发者认为它只需要支持最新和最先进的智能手机 (例如，Windows Phone 10、 iPhone 或安卓系统)，也许，因为开发人员经常亲自持有此类设备。然而，低端的移动设备仍然是非常受欢迎，和它们的用户使用低端来浏览网页，您的业务将需要决定哪些范围的设备支持，考虑其可能的客户。如果您正在构建豪华健康水疗在线手册，你可能决定业务只针对高端智能手机产品，而如果您正在创建一家电影院门票的预订系统，你可能需要考虑为游客提供更强大的功能手机。

常见的解决方案

我们到达 ASP.NET Web 窗体或 MVC 的具体技术细节之前，请注意，web 开发人员一般有三个主要的选项用来支持移动浏览器:

1. 什么也不做只需创建一个标准的、 面向桌面的 web 应用程序，即可依靠移动浏览器，使其可以接受。
   

• 优势: 它是最便宜的选择，实现和维护 — — 无需额外工作
  

• 缺点: 给出了最糟糕的最终用户体验:

  • 最新的智能手机可能呈现和桌面浏览器一样的html展现效果，但用户仍将被迫，缩放和滚动水平并垂直操作您在小屏幕上的内容。这是远远不是理想的操作。
    
  • 较旧的设备和功能手机可能无法令人满意的方式呈现您的标记。
    
  • 即使是在最新的平板电脑设备 (其屏幕可以与笔记本电脑屏幕一样大)，也存在两者完全不相同的操作交互方式。触摸式输入最适用于较大的按钮，那里是没有办法将鼠标光标悬停在飞出菜单。

1. 解决客户端的问题— —现在可以小心使用 CSS 和渐进增强您可以创建标记、 样式和适应无论浏览器运行它们的脚本。例如，用 CSS3 媒体查询，您可以创建在设备屏幕的窄比选定的阈值变成一个单一列布局的多列布局。
   

• 优势:

  • 优化渲染为特定设备在使用中，即使对于未知的未来设备根据他们无论屏幕和输入的特征有
    
  • 很容易让你在所有设备类型 — — 最小重复代码共享服务器端逻辑
    

• 缺点:

  • 移动设备有别于桌面设备，您可能真的希望移动页必须完全不同于你桌面的页面，显示不同的信息。这种变化可能效率不高或不可能实现通过 CSS单独操作，尤其考虑到如何不一致旧设备对CSS规则的解释，特别是 CSS 3 属性。
    
  • 没有提供的不同的服务器端逻辑和工作为不同的设备支持。例如，不能通过单纯的css实现一个简单的购物车提供给移动用户使用
    
  • 低效带宽使用。你的服务器可能需要传输的标记和样式应用到所有可能的设备，即使目标设备只会使用该信息的子集。
    

1. 解决服务器上的问题— —如果您的服务器知道什么设备正在访问它 — — 或是该设备的属性，如：屏幕大小和输入方式 等特性，无论是移动设备 — — 它可以运行不同的逻辑和输出不同的 HTML 标记，通过服务端视图渲染的方式
   

• 优势:

  • 最大的灵活性。有没有限制多少，你可以改变你的服务器端逻辑的手机或优化您的标记所需的，特定于设备的布局。
    
  • 高效的带宽使用。你只需要传送的标记和样式信息的目标设备将使用。
    

• 缺点:

  • 代码的重复（如，让你创建你的 Web Forms pages或 MVC views相似，但略有不同的副本）。在可能的情况，你会分解出公共逻辑进入下一层或服务，但你的UI代码或HTML标签某些部分可能必须被复制，然后保持平行。
    
  • 设备检测是有可能出现无法识别的情况。它需要将列表或数据库的已知的设备类型及特征 (但它不会总是最新的完美数据)，也不能保证准确地匹配每个传入的请求。本文档稍后介绍一些选项和易犯的错误。

为了获得最佳效果，大多数开发者发现他们需要结合选项（2）和（3）。在客户端上使用CSS或JavaScript的甚至轻微的文体差异最好容纳，而在数据主要区别，工作流程，或标记是最有效在服务器端代码执行。