快速开发平台用户访问自适应PC和移动页面

快速开发平台用户访问一个域名地址,他可以通过手机访问,也可以通过PC电脑访问,如果除了界面本身的自适应技术外,我们还有没有其他办法来解决自适应PC端和移动端页面?

快速开发平台

我们有两种方式来实现用户输入一个域名地址,系统自判断终端设备类型,然后导向到相关的终端页面。

方式一:(也是我们快速开发平台中使用的方法)

<script>
	var pc_style = ""
	var browser = {
		versions: function () {
			var u = navigator.userAgent, app = navigator.appVersion;
			return {
				trident: u.indexOf('Trident') > -1,
				presto: u.indexOf('Presto') > -1,
				webKit: u.indexOf('AppleWebKit') > -1,
				gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
				mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('Chrome') < 0,
				ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
				android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
				iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
				iPad: u.indexOf('iPad') > -1,
				webApp: u.indexOf('Safari') == -1,
				ua: u
			};
		}(),
		language: (navigator.browserLanguage || navigator.language).toLowerCase()
	}
	if (browser.versions.mobile && !browser.versions.iPad) {
		this.location = "http://yunm.hocode.com/home/indexm";
	}
</script>

方式二:

<script>
    var uaTest = /Android|webOS|Windows Phone|iPhone|ucweb|ucbrowser|iPod|BlackBerry/i.test(navigator.userAgent.toLowerCase()); 
    var touchTest = 'ontouchend' in document; 
    if (uaTest && touchTest) { 
    window.location.href = '/home/indexm'; 
</script>

快速开发平台 web app

综上:不管是方式还是方式二都有一段判断浏览器的代码,一段判断终端设备的代码,一段跳转的代码。这就是JavaScript脚本跳转,我们配上Bootstrap h5技术, webapp移动端的开发就变得很容易高效。

标签: 快速开发平台WebApp标签

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:软件开发框架 » 快速开发平台用户访问自适应PC和移动页面
本文标题:快速开发平台用户访问自适应PC和移动页面
本文地址:http://www.hocode.com/OrgTec/UI/0021.html

相关文章: 软件开放平台.NET MVC5路由机制详细讲解

电话
电话 18718672256

扫一扫
二维码