将单页桌面应用程序拆分为移动设备上的多个页面答案

【问题标题】：Split a single page desktop app into multiple pages on mobile将单页桌面应用程序拆分为移动设备上的多个页面
【发布时间】：2015-04-13 00:21:10
【问题描述】：

我目前正在开发一个单页应用程序，使用 Symfony 2.6 作为后端，使用 HTML、CSS 和 JQuery 作为前端。该应用程序在前端非常模块化，带有用于划分内容以用于不同目的的 SECTION 标签。比如有：

等等

该站点使用 SUSY Sass 框架 (http://susydocs.oddbird.net/en/latest/) 创建响应式网格系统，并且与大多数响应式站点一样，这会导致桌面设备上的平均页面长度在移动设备上变得更长，因为各种面板开始堆叠.

因此，我想知道是否可以在某个断点将单页桌面应用程序分成多个页面，然后我可以从隐藏在桌面设备上的仅限移动设备的菜单链接到这些页面。

任何帮助都非常受欢迎。

谢谢

【问题讨论】：

【解决方案1】：

您应该为每个部分制作一个单独的 Twig 模板。在您的单页布局中，您可以执行以下操作：

<div id="section1">{{ include("path/to/section1.html.twig") }}</div>
<div id="section2">{{ include("path/to/section2.html.twig") }}</div>

接下来，为每个部分创建一个模板包装器以进行单独的渲染，例如：

section1-decorated.html.twig

{% extends "base.html.twig" %}
{% block body %}{{ include("path/to/section1.html.twig") }}{% endblock %}

现在为移动用户为这些部分创建单独的操作，您可以在其中呈现这些装饰部分：

<?php

class FooController
{
    public function section1Action()
    {
        return $this->render('path/to/section1-decorated.html.twig');
    }
}

【讨论】：

【解决方案2】：

也许您可以考虑隐藏内容并显示它，遵循您的单页应用程序。因此，您只需要在移动设备上隐藏这些部分并显示一些可以切换它们的链接或按钮。比分割成多个真实页面要容易得多，而且效果是一样的。

希望对你有帮助:)

【讨论】：

您好，Alvaro，感谢您的回复。是的，我曾将其视为一种方法。但是我想知道是否有一种方法可以在服务器端进行，这样如果用户只对一个部分感兴趣，他们就不必在移动设备上下载整个页面。