JavaScript Django default scaling using extends index

I'm using Django's template inheritance (extends) in every page of the app. The current design looks too zoomed out, and I want to adjust the default scaling through my index.html, but it didn't work. I also tried using custom CSS, but it still doesn't fix the issue. Does anyone have an idea how I can adjust the default scaling properly?

I have this in my index.html

<meta name="viewport" content="width=450, initial-scale=0.6, user-scalable=yes, minimum-scale=0.6, maximum-scale=0.6" />

We have to check the included HTML files because when you use {% include %}, the viewport meta tags in individual pages get overridden or ignored... So, I think the best solution as I tried in my projects is creating a base.html template

  • templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>{% block title %}My App{% endblock %}</title>
    
    <style>
        /* Reset and ensure consistent scaling */
        * {
            box-sizing: border-box;
        }
        
        html, body {
            margin: 0;
            padding: 0;
            overflow-x: auto;
        }
        
        /* Main scaling container */
        .scale-container {
            transform: scale(0.6);
            transform-origin: top left;
            width: 166.67%; /* 100/0.6 = 166.67% */
            min-height: 166.67vh;
        }
        
        /* For mobile devices - adjust as needed */
        @media (max-width: 768px) {
            .scale-container {
                transform: scale(0.8);
                width: 125%; /* 100/0.8 = 125% */
                min-height: 125vh;
            }
        }
    </style>
    
    {% block extra_css %}{% endblock %}
</head>
<body>
    <div class="scale-container">
        {% block content %}{% endblock %}
    </div>
    {% block extra_js %}{% endblock %}
</body>
</html>

and in your index.html, you can use that:

{% extends 'base.html' %}

{% block title %}Home - My App{% endblock %}

{% block content %}
    <main>
        <h1>Welcome to My App</h1>
        <p>This content will be scaled properly</p>
    </main>
{% endblock %}
Back to Top