我的 django 网站的一部分在智能手机上看起来比其余部分更糟糕，是什么原因造成的？

Question

我想请您帮助我的 django 网站。我将我的网站推送到 heroku，我认为一切正常。 smartphones 上的 "final view" 除外。在 PC 上它很好，但在 phone 我可以水平和垂直滚动一点点。

我想那是因为我在我的图像上使用了 "zoom" css 函数来使它们按我想要的方式对齐。但是，图像仍然很小我使用缩放使它们变大，而不是其他方式所以应该没问题？

我可以在不破坏我其余工作的情况下以某种方式修补它吗？我发现了这个 Whosebug 主题：DISABLE the Horizontal Scroll 但是 "countering" 用户使用 JS 滚动对我来说看起来像是一个计划 "B" 或 "C" :P

以下是显示我的问题的屏幕截图：

这是此页面的模板：

    {% extends "builder/base.html" %}
{% load static %}

{% block content %}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <meta charset="UTF-8">
    <title>Robot Builder</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--Main jumbotron with all content inside-->
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-4">{{ robot_id }}
            <!--Button for reloading page to randomize robot elements again-->
            <br><button type="button" onClick="window.location.reload();" class="btn btn-info btn-lg" id="randomize">Randomize again!</button>
        </h1>
        <p class="lead">
            <br><br><center>
            <!--Comic bubble with message for user that appears over robot head-->
            <img src="{% static 'builder/comic_bubble.png' %}" alt="Comic Text Bubble" width="100" class="comic_bubble" id="comic_bubble"><br>
            <div id="comic_bubble_text">
        {{ message }}</p>
    </div>
    <!--Random robot head-->
    <img src="{% with 'builder/'|add:head_number as image_static %} {% static image_static %} {% endwith %}" alt="{{ head_number }}" class="robot_images" width="200" id="head"><br>
    <!--Random robot body#1-->
    {% if amount_body_elements > 0 %}
        <img src="{% with 'builder/'|add:body_element_1 as image_static %} {% static image_static %} {% endwith %}" alt="{{ body_element_1 }}" class="robot_images" width="200" id="{{ id_body_1 }}" onerror="this.style.display = 'none'"><br>
    {% endif %}
    <!--Random robot body#2-->
    {% if amount_body_elements > 1 %}
        <img src="{% with 'builder/'|add:body_element_2 as image_static %} {% static image_static %} {% endwith %}" alt="{{ body_element_2 }}" class="robot_images" width="200" id="{{ id_body_2 }}" onerror="this.style.display = 'none'"><br>
    {% endif %}
    <!--Random robot body#3-->
    {% if amount_body_elements > 2 %}
        <img src="{% with 'builder/'|add:body_element_3 as image_static %} {% static image_static %} {% endwith %}" alt="{{ body_element_3 }}" class="robot_images" width="200" id="{{ id_body_3 }}" onerror="this.style.display = 'none'"><br>
    {% endif %}
    <!--Random robot legs-->
    <img src="{% with 'builder/'|add:legs_number as image_static %} {% static image_static %} {% endwith %}" alt="{{ legs_number }}" class="robot_images" width="200" id="legs">
    <!--Clouds that appear when you refresh window to randomize robots element again. They are disappearing quickly.-->
    <div id="fadeout">
        {% if amount_body_elements > 1 %}
            <img src="{% with 'builder/'|add:cloud_number_1 as image_static %} {% static image_static %} {% endwith %}" alt="{{ cloud_number_1 }}" class="cloud" width="25" id="{{ id_cloud_1 }}" onerror="this.style.display = 'none'">
        {% endif %}
        <img src="{% with 'builder/'|add:cloud_number_2 as image_static %} {% static image_static %} {% endwith %}" alt="{{ cloud_number_2 }}" class="cloud" width="25" id="{{ id_cloud_2 }}" onerror="this.style.display = 'none'">
        <img src="{% with 'builder/'|add:cloud_number_3 as image_static %} {% static image_static %} {% endwith %}" alt="{{ cloud_number_3 }}" class="cloud" width="25" id="{{ id_cloud_3 }}" onerror="this.style.display = 'none'">
    </div>
    </center>
    <!--Javascript that I used for making cloud from before disappear after given amount of ms. Opacity from 1 to 0.-->
    <script>
function displayOut() {
    var a = document.getElementById('id_cloud_1');
    setTimeout(function(){
        a.style.opacity='0';
    }, 200);
    var b = document.getElementById('id_cloud_2');
    setTimeout(function(){
        b.style.opacity='0';
    }, 300);
    var c = document.getElementById('id_cloud_3');
    setTimeout(function(){
        c.style.opacity='0';
    }, 400);
}
displayOut();
    </script>
</div>

</body>
</html>

{% endblock %}

谢谢，干杯

Answer 1

在您的 css 文件中，您可以将正文设置为 width: 100vw & overflow-x: hidden

应该可以解决侧滚问题！无需为此使用 JS！

我的 django 网站的一部分在智能手机上看起来比其余部分更糟糕，是什么原因造成的？

Part of my django website looks worse on smartphone than rest, what is causing it?

html

css

django

android

responsive-design