如何在Django中检测安卓折叠/翻盖手机并适配模板？

问题背景 #

项目通过django_user_agents工具识别设备，分别为PC/平板、移动端展示不同模板，核心代码如下：

...
from django_user_agents.utils import get_user_agent
...

class indexView(View):
    def get(self, request, *args, **kwargs):
        ...
        user = get_user_agent(request)
        if user.is_pc or user.is_tablet:
            template_name = 'web/index.html'     # for PC and Tablet
        else :
            template_name = 'mobile/index.html'  # for Mobile
        ...

但Galaxy Z Fold4在Chrome浏览器中，无论折叠还是展开状态都被识别为平板；三星自带浏览器中折叠状态则正常显示移动端模板。查看Chrome的User Agent发现，其包含“Safari”而非“Mobile Safari”：

Mozilla/5.0 (Linux; Android 13; SM-F936N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

需求：让折叠手机处于折叠状态时，在Chrome浏览器外屏显示移动端模板。

可行解决方案 #

1. 前端+后端结合屏幕尺寸检测 #

折叠屏的核心差异是折叠/展开状态下的屏幕宽度不同，通过前端传递视口宽度给后端，辅助设备判断：

• 前端页面加载时，用JavaScript获取window.innerWidth，通过URL参数、AJAX或Cookie传递给后端
• 后端视图中结合UA信息和屏幕宽度调整判断逻辑：

  class indexView(View):
      def get(self, request, *args, **kwargs):
          user_agent = get_user_agent(request)
          screen_width = request.GET.get('screen_width', 0)
          try:
              screen_width = int(screen_width)
          except ValueError:
              screen_width = 0
  
          # 自定义移动端宽度阈值（可根据实际需求调整，比如768px）
          mobile_threshold = 768
          # 针对折叠屏的特殊判断：平板标识但屏幕宽度小于阈值时，视为移动端
          is_fold_mobile = user_agent.is_mobile or (user_agent.is_tablet and screen_width < mobile_threshold)
          
          if user_agent.is_pc or (user_agent.is_tablet and not is_fold_mobile):
              template_name = 'web/index.html'
          else:
              template_name = 'mobile/index.html'
          # 后续业务逻辑...
  

2. 自定义UA解析规则 #

基于django_user_agents的底层逻辑，针对折叠屏设备型号做特殊判断：

• 检测UA字符串中的折叠屏设备型号（比如Z Fold4的SM-F936N）
• 结合屏幕尺寸或UA特征调整模板选择逻辑：

  class indexView(View):
      def get(self, request, *args, **kwargs):
          user_agent_str = request.META.get('HTTP_USER_AGENT', '')
          user = get_user_agent(request)
          
          # 判断是否为Galaxy Z Fold4
          is_z_fold4 = 'SM-F936N' in user_agent_str
          
          if is_z_fold4:
              # 优先用屏幕宽度判断折叠状态
              screen_width = request.GET.get('screen_width', 0)
              try:
                  screen_width = int(screen_width)
              except ValueError:
                  screen_width = 0
              
              template_name = 'mobile/index.html' if screen_width < 768 else 'web/index.html'
          else:
              # 原有设备识别逻辑
              if user.is_pc or user.is_tablet:
                  template_name = 'web/index.html'
              else:
                  template_name = 'mobile/index.html'
          # 后续业务逻辑...
  

3. 前端主导模板切换 #

将模板切换逻辑完全交给前端处理，适配折叠屏动态状态变化：

• 后端统一返回基础布局模板，前端通过JavaScript实时检测屏幕尺寸和设备状态
• 前端动态加载对应移动端或桌面端的HTML组件，甚至可以在用户折叠/展开屏幕时实时切换模板

内容的提问来源于stack exchange，提问作者JRR