A Django template extending the Django-HTML5-Boilerplate package using jQueryMobile to create a base template for a mobile HTML5 application. https://github.com/mattsnider/django-html5-boilerplate http://jquerymobile.com/

iOSAndjQueryMobileBase.html

{% extends 'dh5bp/base_script_in_head.html' %}
{% load staticfiles %}
{% load url from future %}
{% block title %}{APP_TITLE}{% endblock %}
{% block head %}
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-startup-image" href="{% static '{STATIC_IMAGE_PATH}/startup-image.png' %}">
    <link rel="apple-touch-icon" href="{% static '{STATIC_IMAGE_PATH}/touch-icon-ipad.png' %}" />
    <link rel="apple-touch-icon" sizes="72x72" href="{% static '{STATIC_IMAGE_PATH}/touch-icon-ipad.png' %}" />
    <link rel="apple-touch-icon" sizes="114x114" href="{% static '{STATIC_IMAGE_PATH}/touch-icon-iphone-retina.png' %}" />
    <link rel="apple-touch-icon" sizes="144x144" href="{% static '{STATIC_IMAGE_PATH}/touch-icon-ipad-retina.png' %}" />
{% endblock %}
{% block pre_main_script %}
    <script src="{% static '{STATIC_JS_PATH}/jquery-addToHome.js' %}"></script>
{% endblock %}
{% block post_main_script %}
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
{% endblock %}

main.js

(function() {
  $(document).showAddToHome();
  
  $('#page1').on('pageinit', function() {
    // put your logic for handling page1 here
  });
}());

mobileSite.html

{% extends 'iOSAndjQueryMobileBase.html' %}
{% load url from future %}
{% load staticfiles %}

{% block head %}
    {{ block.super }}

    {% put styles here %}
{% endblock %}

{% block content %}
    <div data-role="page" id="page1">

        <div data-role="header">
    		<h1>Page Title</h1>
    	</div><!-- /header -->
    
    	<div data-role="content">
    		<p>Page content goes here.</p>
    	</div><!-- /content -->
    
    	<div data-role="footer">
    		<h4>Page Footer</h4>
    	</div><!-- /footer -->

    </div><!-- /page -->
{% endblock %}