移动端和pc端分离，如何排除pc某些页面在移动端访问不需要做重定向？

御坂主机 · 发表于 2024-6-25 11:31:05

本帖最后由御坂主机于 2024-7-3 18:20 编辑

1. 引言

在移动互联网时代，用户通过各种设备访问网站，包括PC和移动设备。为了提供更好的用户体验，通常会对PC端和移动端进行分离，即针对不同设备提供不同的页面或布局。然而，有时候我们希望某些PC页面在移动端访问时不进行重定向。这篇文章将详细介绍如何实现这一目标。

1.1 移动端和PC端分离的必要性

随着移动设备的普及，用户体验变得至关重要。移动端页面通常需要进行优化，以适应小屏幕和触摸操作。通过分离移动端和PC端，可以分别针对不同设备优化页面，提高用户体验。

1.2 问题描述

在实现PC端和移动端分离时，通常会设置重定向规则，使移动设备访问PC页面时自动跳转到对应的移动页面。但在某些情况下，我们希望某些特定的PC页面在移动端访问时不进行重定向。例如，某些管理后台页面或特殊功能页面。

2. 实现方法

为了实现这一目标，我们需要在前端和后端进行一些设置。

2.1 前端实现方法

在前端，我们可以通过javaScript检测用户的设备，并根据设备类型决定是否进行重定向。

(1) 检测设备类型

可以使用navigator.userAgent来检测用户的设备类型。以下是一个简单的示例：

var userAgent = navigator.userAgent.toLowerCase();
var isMobile = /iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(userAgent);

复制代码

(2) 设置重定向规则

根据检测到的设备类型，决定是否进行重定向。以下是一个示例代码：

if (isMobile) {
var currentUrl = window.location.href;
var nonRedirectPages = ['/special-page1', '/special-page2'];
var shouldRedirect = true;
for (var i = 0; i < nonRedirectPages.length; i++) {
if (currentUrl.indexOf(nonRedirectPages<i>) !== -1) {
shouldRedirect = false;
break;
}
}
if (shouldRedirect) {
window.location.href = 'https://m.yoursite.com' + window.location.pathname;
}
}</i>

复制代码

2.2 后端实现方法

在后端，我们可以通过服务器配置或代码逻辑实现对特定页面的重定向控制。

(1) 使用服务器配置

可以通过Apache或Nginx等服务器配置文件，设置重定向规则。例如，在Nginx中，可以通过以下配置实现：

if ($http_user_agent ~* "iphone|ipod|android|blackberry|mini|windows\sce|palm") {
set $mobile_rewrite 1;
}
if ($request_uri ~* "/special-page1|/special-page2") {
set $mobile_rewrite 0;
}
if ($mobile_rewrite) {
rewrite ^ <a href="https://m.yoursite.com" target="_blank">https://m.yoursite.com</a>$request_uri permanent;
}

复制代码

(2) 使用后端代码

在后端代码中，可以根据用户代理信息和请求的URL，决定是否进行重定向。以下是一个php示例代码：

$userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
$isMobile = preg_match('/iphone|ipod|android|blackberry|mini|windows\sce|palm/i', $userAgent);
$currentUrl = $_SERVER['REQUEST_URI'];
$nonRedirectPages = array('/special-page1', '/special-page2');
$shouldRedirect = true;
foreach ($nonRedirectPages as $page) {
if (strpos($currentUrl, $page) !== false) {
$shouldRedirect = false;
break;
}
}
if ($isMobile && $shouldRedirect) {
header('Location: <a href="https://m.yoursite.com" target="_blank">https://m.yoursite.com</a>' . $currentUrl);
exit;
}

复制代码

3. 实例演示

以下是一个完整的示例，展示了如何在前端和后端结合实现特定PC页面在移动端访问时不进行重定向。

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面重定向示例</title>
<script>
window.onload = function() {
var userAgent = navigator.userAgent.toLowerCase();
var isMobile = /iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(userAgent);
if (isMobile) {
var currentUrl = window.location.href;
var nonRedirectPages = ['/special-page1', '/special-page2'];
var shouldRedirect = true;
for (var i = 0; i < nonRedirectPages.length; i++) {
if (currentUrl.indexOf(nonRedirectPages<i>) !== -1) {
shouldRedirect = false;
break;
}
}
if (shouldRedirect) {
window.location.href = 'https://m.yoursite.com' + window.location.pathname;
}
}
};
</script>
</head>
<body>
<h1>欢迎访问我们的页面</h1>
</body>
</html></i>

复制代码

后端代码（PHP示例）：

<?php
$userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
$isMobile = preg_match('/iphone|ipod|android|blackberry|mini|windows\sce|palm/i', $userAgent);
$currentUrl = $_SERVER['REQUEST_URI'];
$nonRedirectPages = array('/special-page1', '/special-page2');
$shouldRedirect = true;
foreach ($nonRedirectPages as $page) {
if (strpos($currentUrl, $page) !== false) {
$shouldRedirect = false;
break;
}
}
if ($isMobile && $shouldRedirect) {
header('Location: <a href="https://m.yoursite.com" target="_blank">https://m.yoursite.com</a>' . $currentUrl);
exit;
}
?>

复制代码

4. 结论

通过在前端和后端结合设置重定向规则，可以实现特定PC页面在移动端访问时不进行重定向。这样不仅可以提升用户体验，还可以灵活地控制不同设备上的页面访问行为。希望这篇文章能为您在实现PC端和移动端分离时提供有价值的参考。

------------------------------------------------------------------------------------------------------------------------------------------

======== 御坂主机 ========

>> VPS主机服务器前沿资讯行业发布技术杂谈 <<

>> 推广/合作/找我玩 TG号 : @Misaka_Offical <<

-------------------------------------------------------------------------------------------------------------------------------------------

		自动登录	找回密码
密码			立即注册

[后端] 移动端和pc端分离，如何排除pc某些页面在移动端访问不需要做重定向？