Bootstrap

Web应用实现在手机端访问和使用方案

1. 背景

当前的后台管理系统主要负责云平台和云服务器的管理,并且是以Web应用的形式在使用。但是,当出现服务器紧急情况或需要进行平台注册审核时,如果这些任务发生在非工作时间,例如在通勤路上,我们就无法使用PC浏览器进行访问和操作,这显然是不方便的。另外,由于后台管理系统仅供内部人员使用,我们只需要它能满足基本的查看和配置需求,对于便利性和美观性并没有太高要求。因此,将Web端的所有功能移植到手机端并开发一个App,显然很不划算。毕竟,每当Web端功能迭代时,App端也需要同步更新,这意味着同一功能需要实现两次,所以,开发App的方案就不考虑了。

2. 方案

2.1 方案一:使用手机Edge、Firefox浏览器访问使用【推荐】

  1. 使用手机通过 EdgeFirefox浏览器访问时,设置为“查看桌面网站”( Firefox中称为桌面版网站开关),即可浏览平台的完整布局,并通过手势放大和缩小来居中展示所需内容,操作便捷。
  2. 可将后台管理系统的管理平台添加到手机主屏幕,实现快速访问。
  3. TDesign页面模板演示效果。

2.2 方案二:当前页面 + 全屏

  1. 创建一个专为手机端使用的手机端菜单,仅显示关注页面,手机端访问时读取该菜单显示。
  2. 利用 @media媒体查询调整各页面布局,例如筛选条件等,以避免布局错乱。
  3. 默认情况下,只能在手机横屏模式下使用,提供一个全屏按钮,点击后将当前页面全屏化,以争取更多展示空间。
alt

2.3 方案三:远程软件控制电脑访问使用

使用远程软件(如向日葵)访问电脑,然后在手机端通过手势放大和缩小进行操作。效果与方案一相似,但存在以下不足:

  1. 输入时需要手动打开键盘。
  2. 页面有滚动条时操作繁琐。
  3. 连接可能不稳定,画质不佳。

3. 结论

  1. 方案一无需额外开发成本,只需在指定手机浏览器上使用即可。
  2. 方案二需要额外开发,且最终呈现效果可能不如方案一。
  3. 方案三存在上述提到的缺点。
  4. 综合考虑,推荐采用方案一。

本文由 mdnice 多平台发布

;