Масштабирование JavaScript Django по умолчанию с использованием расширенного индекса

Я использую наследование шаблонов Django (extends) на каждой странице приложения. Текущий дизайн выглядит слишком уменьшенным, и я хочу настроить масштабирование по умолчанию с помощью моего index.html, но это не сработало. Я также пробовал использовать пользовательский CSS, но это по-прежнему не решает проблему. У кого-нибудь есть идея, как я могу правильно настроить масштабирование по умолчанию?

У меня есть это в кармане. index.html

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

Мы должны проверить включенные HTML-файлы, потому что при использовании {% include %} мета-теги viewport на отдельных страницах переопределяются или игнорируются... Итак, я думаю, что лучшим решением, которое я пробовал в своих проектах, является создание шаблона base.html

  • 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>

и в своем index.html вы можете использовать это:

{% 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 %}
Вернуться на верх