判断移动端PC端访问网页时跳转到对应的移动端网页
2016-03-12 10:57
399 查看
原文引用于:http://www.cnblogs.com/yc-755909659/archive/2015/06/06/4556066.html
不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式。
1.效果图
PC端访问显示:
移动端访问显示:
2.实现:
不考虑移动端搜索引擎优化的话,只需要通过JS判断是否移动端,然后确定是否跳转到指定页面就行了,主要JS如下:
//判断是否移动端,如果是则跳转到指定的URL地址
function browserRedirect(url) {
//只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
window.location.replace(url);
}
}
然后在页面引用JS,调用方法就行了:
<script src="../js/wap.js"></script>
<script type="text/javascript">browserRedirect("http://ycdoit.com/test/testmobile.html");</script>
PS:大家可以用PC端和移动端访问 测试页面 查看效果。
不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式。
1.效果图
PC端访问显示:
移动端访问显示:
2.实现:
不考虑移动端搜索引擎优化的话,只需要通过JS判断是否移动端,然后确定是否跳转到指定页面就行了,主要JS如下:
//判断是否移动端,如果是则跳转到指定的URL地址
function browserRedirect(url) {
//只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
window.location.replace(url);
}
}
然后在页面引用JS,调用方法就行了:
<script src="../js/wap.js"></script>
<script type="text/javascript">browserRedirect("http://ycdoit.com/test/testmobile.html");</script>
PS:大家可以用PC端和移动端访问 测试页面 查看效果。
相关文章推荐
- IOS开发随笔
- android的消息处理机制
- Android 中Webview 自适应屏幕
- Android开发之创建App Widget和更新Widget内容
- XMAPP,非本地访问phpmyadmin出现Access forbidden的问题
- Shadow mapping
- unity提示消息窗口
- Android jni学习
- cocos2d-x避免手动修改android.mk文件来编译
- 无知记事本(android版)
- js中, apply方法简单理解(实现回调函数及参数传递)
- Android中Application类用法
- Android:Activity四种启动模式
- 微信开发
- iOS开发学习笔记
- Objective-c 字典对象
- android初次学习(android studio安装及注意事项 1.5版本)
- Android笔记--简单的Fragment和Activity的之间的数据交互(传值)
- Android TTS说中文
- iOS plist 文件的读写