手机平板等移动端适配URL跳转js代码

leixue 设计开发 2014-11-21 14:31:04 阅读(...) 评论(0)

最近泪雪在一直适配泪雪旗下网站的移动版页面,也在这其中遇见过一些问题,特别是在桌面版(PC 电脑版)与移动端跳转切换有很多的测试与测试,目前泪雪官网、极客行与泪雪博客都已经适配成功,而最近几天在开始开发泪雪网的移动端,发现适配也可以有不同的方法。这也是研究几个门户网站的一些收获。

手机平板等移动端的网站适配似乎显得越来越重要了,毕竟现在已经是移动互联的时代了,相信大家也都不会这么快的被淘汰吧!那么在做适配移动端的网站平台其实也挺多的,百度有这样的平台,什么搜狐快站,腾讯风铃的都是很不错的移动建站选择。但是对于泪雪这种追求极致的人,使用第三方平台搭建始终感觉怪怪的,所以之前也只是试用为了给大家写一些相关的感受和介绍罢了,也并没有正式的使用。

下面这段代码是我在开发泪雪网移动版需要判断移动端跳转 URL 的 JS 代码,这里贴在泪雪的博客,同时希望对大家的开发有一些便捷:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//移动端适配URL跳转js代码
<script type="text/javascript">
if(window.location.toString().indexOf('?pad') != -1){
}else{
	if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){  
      if(window.location.href.indexOf("?mobile")<0){
		try{
			if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
				window.location.href="手机页面";
			}else if(/iPad/i.test(navigator.userAgent)){
				window.location.href="平板页面"
			}else{
				window.location.href="其它移动端页面"
			}
		}catch(e){}
	}
	}
}
</script>

简单说说使用,以上这段代码添加在 PC 版页面的头部,中文部分填写自己相关的适配页面。

同时在适配端页面可以添加跳转到 PC 版的链接,手机页面跳转到 PC 端链接:?mobile,平板页面跳转到 PC 端链接:?pad

除非注明,否则均为泪雪博客原创文章,禁止任何形式转载

本文链接:https://zhangzifan.com/mobile-jump-adaptation-url-js.html

发表评论