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

Question

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

• section class =“intro”
• section class =“twitter-feed”
• section class =“tour-info”

等

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

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

任何有用的帮助。

由于

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

Answer 2

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

希望有所帮助：）