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

Question

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

等等

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

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

非常感谢任何帮助。

谢谢

Answer 1

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

希望对您有所帮助:)

Answer 2

您应该为每个部分制作一个单独的 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');
    }
}

Split a single page desktop app into multiple pages on mobile