Home思洋影视事业部网站建设知识库
0 Comments

非响应式设计构建跨端Web App(4)

发布于：2013-10-26  |   作者：广州网站建设  |   已聚集：人围观

DEVICE.JS介绍

device.js是一个起点，这样做基于语义，依靠媒介查询进行设备检测，从而无需特殊的服务器端配置，节省了需要实现用户代理字符串解析的时间和精力。

这个方法是在<head>标签的顶部用搜索引擎友好的标记（linkrel=alternate）声明你要提供的网站版本。



    
	
  1. 
		<link rel="alternate" href="http://foo.com" id="desktop" 
    2. 
	
  2. 
		    media="only screen and (touch-enabled: 0)"> 
    3. 




	接下来，你可以采用服务器端UA检测和版本重定向，或者使用device.js脚本来执行基于功能的客户端重定向。



	更多详细信息，请参阅device.js项目页面 ，同时还有一个使用了device.js进行客户端重定向的测试应用。

	广州网站建设,网站建设,广州网页设计,广州网站设计



	建议：MVC的具体视图



	现在你可能会想，我告诉你的是建立三个完全独立的应用程序，每个用于一种设备类型。不！ 代码共享是关键。



	希望你已经使用了一个类MVC的框架，例如Backbone，Ember等等。如果你已经熟悉重点分解的原则，尤其是你的用户界面（视图层）应该与逻辑（模型层）分离。如果你对此还比较陌生，可以开始了解MVC的一些资源和JavaScript中的MVC 模式。



	  跨设备非常适合现有的MVC框架。你可以轻松地移动视图到独立的文件，为每个设备类型创建一个自定义视图。然后你就可以为所有设备使用除了视图层之外同样的代码。



	



	跨设备的MVC模式



	你的项目可能有以下的结构（当然，你可以自由选择对你应用最有意义的结构）：




    
	
  1. 
		models/ (shared models)   
    2. 
	
  2. 
		  item.js   
    3. 
	
  3. 
		  item-collection.js   
    4. 
	
  4. 
		    
    5. 
	
  5. 
		controllers/ (shared controllers)   
    6. 
	
  6. 
		  item-controller.js   
    7. 
	
  7. 
		    
    8. 
	
  8. 
		versions/ (device-specific stuff)   
    9. 
	
  9. 
		  tablet/   
    10. 
	
  10. 
		  desktop/   
    11. 
	
  11. 
		  phone/ (phone-specific code)   
    12. 
	
  12. 
		    style.css   
    13. 
	
  13. 
		    index.html   
    14. 
	
  14. 
		    views/   
    15. 
	
  15. 
		      item.js   
    16. 
	
  16. 
		      item-list.js 
    17. 




	这种结构使你能够完全控制每个版本加载哪些内容，因为你必须为每个设备采用自定义的HTML，CSS和JavaScript。这非常强大，是开发跨端Web App最精简和最有效的方式，不会依赖于一些小的技巧，例如自适应图像。



	一旦你运行喜欢的构建工具，会把所有的Javascript和CSS合并和压缩到一个独立的文件里，以实现更快的加载速度，而输出的HTML页面看起来类似以下的形式（在手机上，使用device.js）：




    
	
  1. 
		<!doctype html>   
    2. 
	
  2. 
		<head>   
    3. 
	
  3. 
		  <title>Mobile Web Rocks! (Phone Edition)</title>   
    4. 
	
  4. 
		    
    5. 
	
  5. 
		  <!-- Every version of your webapp should include a list of all   
    6. 
	
  6. 
		       versions. --> 
    7. 
	
  7. 
		  <link rel="alternate" href="http://foo.com" id="desktop" 
    8. 
	
  8. 
		      media="only screen and (touch-enabled: 0)">   
    9. 
	
  9. 
		  <link rel="alternate" href="http://m.foo.com" id="phone" 
    10. 
	
  10. 
		      media="only screen and (max-device-width: 650px)">   
    11. 
	
  11. 
		  <link rel="alternate" href="http://tablet.foo.com" id="tablet" 
    12. 
	
  12. 
		      media="only screen and (min-device-width: 650px)">   
    13. 
	
  13. 
		    
    14. 
	
  14. 
		  <!-- Viewport is very important, since it affects results of media   
    15. 
	
  15. 
		       query matching. --> 
    16. 
	
  16. 
		  <meta name="viewport" content="width=device-width">   
    17. 
	
  17. 
		    
    18. 
	
  18. 
		  <!-- Include device.js in each version for redirection. --> 
    19. 
	
  19. 
		  <script src=”device.js”></script>   
    20. 
	
  20. 
		    
    21. 
	
  21. 
		  <link rel=”style” href=”phone.min.css”>   
    22. 
	
  22. 
		</head>   
    23. 
	
  23. 
		<body>   
    24. 
	
  24. 
		  <script src=”phone.min.js”></script>   
    25. 
	
  25. 
		</body> 
    26. 




	需要注意的是(touch-enabled: 0)媒介查询并不标准（只有Firefox通过moz前缀实现了），但是能够被device.js正确运行（感谢Modernizr.touch）。

	广州网站建设,网站建设,广州网页设计,广州网站设计



	版本覆盖



	设备检测有时候有误，在某些情况下，用户可能更喜欢在手机上采用平板布局（也许他们正在使用Galaxy Note），所以一定要向用户提供版本的选择。



	通常的做法是提供一个从桌面到移动版本的链接。这很容易实现，device.js通过device的GET参数来支持此功能。



	结论



	综上，当需要建立跨设备单页的用户界面时，并不适合响应式设计，我们可以这样做：



	1.    挑选一系列设备分类进行支持，并为设备分类设定标准。



	2.    建立你的MVC应用，把界面从代码库分离出来。



	3.    使用device.js进行客户端设备分类检测。



	4.    当你准备好了时，为每个设备分类打包你的脚本和样式表。



	5.    如果客户端重定向有性能问题，放弃device.js，并换到服务器端做UA检测。



	原文链接：http://www.itivy.com/iphone/archive/2012/5/18/634729762320220086.html


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机