在当今的移动互联网时代，为用户提供优质的移动端浏览体验已成为每个网站必须面对的问题。有时候，我们希望能够在用户使用移动设备访问PC端网页时，自动将他们重定向到移动端页面。下面，我们将通过一个JavaScript脚本来展示如何实现这一需求。
方法：JavaScript判断并完成跳转
<script type=”text/javascript”>
// 首先，我们通过window.location.toString().indexOf(‘pref=padindex’) != -1 来判断是否在移动设备上。若是移动设备，此值会不等于-1，但这里我们加了否定，所以接下来的代码将在非移动设备上执行。
if(window.location.toString().indexOf(‘pref=padindex’) != -1){} else {
// 然后我们执行一个复杂的判断。通过 userAgent 来检查用户正在使用的是否是移动设备浏览器。
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))){
// 确保用户没有手动请求 PC 端界面
if(window.location.href.indexOf(“?mobile”)<0){
// 这部分代码再次检查用户设备是否为移动设备，若是，则将用户重定向至移动端网页。
try{ if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
// “这里填写移动端URL” 需要用你的移动端网址替换
window.location.href=”这里填写移动端URL“; } } catch(e){} } }}
</script>
实例代码：
<script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -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="这里填写移动端URL";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>
为了避免复制出错，这里粘贴多一份JS代码备用。
<script type=”text/javascript”>if(window.location.toString().indexOf(‘pref=padindex’) != -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=”这里填写移动端URL“;}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>
如图：
备注：将红色处修改为需要跳转的移动URL即可。
以上就是我们的JavaScript脚本。这段代码会检查用户当前的设备类型，以及他们是否已经手动选择了访问哪个版本的网页，然后决定是否需要将他们重定向至移动端网页。希望这篇文章能够帮助你更好地实现 PC 端到移动端的自动跳转，提升网站的用户体验。
声明：所有白马号原创内容，未经允许禁止任何网站及个人转载、采集等一切非法引用。本站已启用原创保护，有法律保护作用，否则白马号保留一切追究的权利。发布者：白马号，转转请注明出处：https://www.bmhysw.com/article/49597.html
微信扫一扫 
支付宝扫一扫 
