Разделите одностраничное настольное приложение на несколько страниц на мобильном устройстве
В настоящее время я занимаюсь разработкой одностраничного приложения, используя Symfony 2.6 для внутреннего интерфейса и HTML, CSS и JQuery для внешнего интерфейса. Приложение имеет довольно модульный интерфейс с тегами SECTION, которые используются для разделения контента для различных целей. Например, есть:
- раздел класс = «введение»
- section class = «twitter-feed»
- раздел класс = «тур-информация»
и т.п.
Сайт использует фреймворк 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.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');
}
}
Другие решения
Возможно, вы могли бы подумать о том, чтобы скрыть контент и показать его, следуя вашему одностраничному приложению. Таким образом, вам нужно только скрыть эти разделы на мобильном телефоне и показать некоторые ссылки или кнопки, которые будут переключать их. Было бы намного проще, чем разделять на несколько реальных страниц, и эффект был бы таким же.
Надеюсь, поможет 🙂