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

张子凡 设计开发 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

相关推荐

留言评论

登录 后留言

活在互联网

猜你喜欢

内页链接