在移动设备上将一个单页桌面应用程序拆分为多个页面 - Split a single page desktop app into multiple pages on mobile

Split a single page desktop app into multiple pages on mobile

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

等等。

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

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

任何帮助都很值得。

感谢

您应该为每个部分制作一个单独的Twig模板。在你的一页布局中，你可以这样做：

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

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

section1-decorated.html.trick

{% 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');
    }
}

也许你可以考虑隐藏内容并显示它，遵循你的单页应用程序近似。所以你只需要在手机上隐藏这些部分，并显示一些链接或按钮来切换它们。这将比分割成多个真实的页面容易得多，而且效果也是一样的。

希望有帮助：）