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 %} 