会员中心如何跳转手机版？-织梦建站-盈思创科技

独立手机站：手机版和电脑版是两个完全独立的网站（www.yoursite.com 和 m.yoursite.com），用户通过不同域名访问。
响应式模板：使用一套模板，通过CSS和JavaScript在不同设备上显示不同的布局，但域名是同一个。

下面我将针对这两种最常见的情况,提供详细的解决方案。

（图片来源网络，侵删）

独立手机站（最常见）

这种方案通常使用子域名（如 m.yoursite.com）来承载手机版网站，当用户在手机上访问会员中心时，自动将其重定向到手机版的会员中心页面。

实现思路：

配置手机站：你需要确保你的手机站已经搭建好，并且会员中心的页面（如 m/member/）可以正常访问。
添加跳转代码：在电脑版会员中心的模板文件中，加入一段JavaScript代码，这段代码会检测用户的设备类型，如果是手机，则立即跳转到手机版的对应页面。

详细步骤：

第1步：找到电脑版会员中心模板文件

电脑版的会员中心模板通常位于 /templets/default/member/ 目录下，你需要修改的是用户登录后看到的那个主页模板，文件名通常是 index.htm。

第2步：在模板文件中添加跳转代码

（图片来源网络，侵删）

打开 /templets/default/member/index.htm 文件，在 <head> 标签内部，添加如下JavaScript代码：

<head>
    <meta charset="UTF-8">{dede:global.cfg_webname/} - 会员中心</title>
    <!-- 其他原有的head内容 -->
    <script type="text/javascript">
        // 检测是否为移动设备
        function isMobile() {
            // 获取浏览器navigator对象的userAgent属性
            var userAgentInfo = navigator.userAgent;
            // 定义移动设备常用的浏览器关键字
            var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
            var flag = false;
            // 遍历关键字，判断userAgent中是否包含
            for (var v = 0; v < mobileAgents.length; v++) {
                if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
                    flag = true;
                    break;
                }
            }
            return flag;
        }
        // 页面加载完成后执行
        window.onload = function() {
            // 如果是移动设备，则跳转到手机版会员中心
            // !!! 请务必将下面的 'http://m.yoursite.com/member/' 修改为你自己的手机版会员中心地址 !!!
            if (isMobile()) {
                window.location.href = 'http://m.yoursite.com/member/';
            }
        }
    </script>
</head>

代码解释：

isMobile() 函数：通过检测浏览器 navigator.userAgent 字符串中是否包含 "Android", "iPhone", "iPad" 等关键字来判断用户是否在使用移动设备。
window.onload：确保整个页面加载完毕后再执行跳转逻辑，避免页面还未渲染完成就被跳走。
window.location.href = '...'：这是执行页面跳转的核心代码。
http://m.yoursite.com/member/：这是最关键的一步，你必须将其替换为你自己手机站的会员中心URL。

第3步：更新缓存

登录织梦后台,点击顶部菜单的 “系统” -> “一键更新网站”，然后选择“更新主页HTML”和“更新文档HTML”，并勾选“更新所有”，这样可以确保你修改的模板文件已经生效。

使用响应式模板（单域名）

如果你的网站是响应式的,即同一套模板在手机和电脑上都能自适应显示，那么你就不需要“跳转”，而是需要隐藏电脑版特有的元素，并显示手机版专用的元素。

实现思路：

利用CSS的媒体查询（Media Queries）来控制不同屏幕尺寸下元素的显示和隐藏。

详细步骤：

第1步：在模板中准备不同版本的HTML结构

在你的会员中心模板文件（如 member/index.htm）中，为电脑版和手机版分别准备不同的内容块，并给它们加上不同的class或ID以便于CSS控制。

<!-- 电脑版特有内容，默认显示 -->
<div class="pc-content">
    <h2>这里是电脑版会员中心</h2>
    <p>一些只在电脑上显示的复杂功能或信息...</p>
</div>
<!-- 手机版特有内容，默认隐藏 -->
<div class="mobile-content" style="display:none;">
    <h2>欢迎来到手机会员中心</h2>
    <p>一些简化过的手机端功能...</p>
</div>

第2步：添加CSS媒体查询

在模板文件的 <head> 部分，或者在网站的公共CSS文件中，添加如下CSS代码：

<style>
    /* 默认情况下，隐藏手机版内容，显示电脑版内容 */
    .mobile-content {
        display: none;
    }
    /* 当屏幕宽度小于或等于768px时（通常认为是平板和手机的尺寸） */
    @media (max-width: 768px) {
        /* 隐藏电脑版内容 */
        .pc-content {
            display: none;
        }
        /* 显示手机版内容 */
        .mobile-content {
            display: block;
        }
    }
</style>

代码解释：

.mobile-content { display: none; }：默认情况下，手机版内容块是隐藏的。
@media (max-width: 768px) { ... }：这是一个媒体查询，表示当浏览器窗口的宽度小于或等于768像素时，执行花括号内的CSS规则。
在这个规则下,我们将 .pc-content 隐藏，并将 .mobile-content 显示出来。

这样,当用户在手机上访问时，浏览器会自动应用手机版的CSS样式，无需任何跳转，用户体验更流畅。

总结与建议

方案	优点	缺点	适用场景
独立手机站跳转	逻辑清晰，手机站可以完全独立开发。利于SEO，可以分别为PC和移动端做优化。对移动设备加载速度有针对性优化。	需要维护两套代码和内容。如果跳转逻辑不完善，可能会有SEO问题（如百度移动适配）。	大多数商业网站，特别是对移动端体验要求高、有独立运营需求的网站。
响应式模板	只需维护一套代码，内容管理方便。用户体验流畅，没有跳转延迟。有利于SEO，因为只有一个URL。	开发和调试相对复杂。可能会加载一些PC端不需要的资源，影响移动端加载速度（需优化）。	博客、企业官网、内容型网站等，希望简化管理和维护，且对移动端性能要求不是极致的场景。

给你的建议：

如果你已经搭建了独立的手机站,或者计划未来对移动端进行精细化运营，强烈推荐使用“场景一”的跳转方案。
如果你的网站内容更新频繁,不希望维护两套系统，且开发团队有能力制作响应式模板，“场景二”是更好的选择。

选择最适合你网站规模和团队技术能力的方案即可。

会员中心如何跳转手机版？

独立手机站（最常见）

实现思路：

详细步骤：

使用响应式模板（单域名）

实现思路：

详细步骤：

总结与建议

相关文章

目录[+]