python - Python Django Webapp 在智能手机中没有响应

问题描述

我在 python Django 框架中开发了我的第一个 Web 应用程序，部署在 pythonanywhere.com Web 服务器中。

我已经在这个应用程序中使用了最新的引导程序，但它在智能手机屏幕上没有正确响应。在笔记本电脑和平板电脑中响应，但在智能手机中不响应。

您也可以在手机“ http://sandeepbhatt.pythonanywhere.com/ ”中查看。

请查看我的 base.html 和 index.html 代码，问题出在哪里，还请让我知道是否需要任何详细信息来找出本文未提及的此问题。

我的 base.html 代码：

<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

  <title>PIV</title>
  <!-- <link rel="stylesheet" href="{% static "css/index.css" %}"> -->
</head>

<body>
  <!-- <style>
              body{ background: url("{% static "images/background.jpg"  %}");  background-size: cover; background-repeat: no-repeat;}
            </style> -->

  <!-- Navbar start from here -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- <a class="navbar-brand" href="">Navbar</a> -->
    <!-- Just an image -->
    <nav class="navbar navbar-light bg-light">
      <a class="navbar-brand" href="{% url 'index' %}">
        <img src="{% static " images/logo.jpg" %}" width="70" height="50" alt="">
      </a>
    </nav>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">

        {% if user.is_authenticated %}
        <li class="nav-item">
          <a class="nav-link" href="{% url 'logout' %}">Logout</a>
        </li>
        {% else %}
        <!-- <li class="nav-item">
            <a class="nav-link" href="{% url 'survey_app:user_login'%}">Login</a>
          </li> -->
        {% endif %}


        <li class="nav-item">
          <a class="nav-link" href="{% url 'survey_app:analysis' %}">Analysis</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'survey_app:tracking' %}">Tracking</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'admin:index' %}">Admin</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'survey_app:register' %}">Register</a>
        </li>
      </ul>
    </div>
  </nav>

</body>

<div class="container">
  {% block contant %}
  {% endblock %}
</div>
<!-- footer -->

<div class="card text-center">
  <div class="card-footer text-muted">
    Powered By <small>Political India Venture</small>
    &copy;2019
  </div>
</div>
</html>

我的 index.html 代码：

<!DOCTYPE html>

{% extends 'survey_app/base.html' %}
{% load static %}
{% block contant %}

<head>
  <link rel="stylesheet" href="{% static " css/login_form.css" %}">
  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> -->
</head>

<!-- <style>
      body{ background: url("{% static "images/background.jpg"  %}");  background-size: cover; background-repeat: no-repeat;}
    </style> -->
<div class="row">
  <div class="col">
    <h2>Welcome to Political India Venture </h2>
    <h2>Survey App!</h2>

    <h5 class="font-italic<div class=" row">

      <h5>Get the answers you need</h5>

      <div class="wrapper">
        <form method="POST" class="form-signin" action="{% url " survey_app:user_login" %}">
          {% csrf_token %}
          {# A more "HTML" way of creating the login form#}
          <h2 class="form-signin-heading">Please login</h2>
          <input type="text" class="form-control" name="username" placeholder="User Name" required="" autofocus="" />
          <input type="password" class="form-control" name="password" placeholder="Password" required="" />
          <label class="checkbox">
            <input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember me
          </label>
          <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
        </form>
      </div>
  </div>
</div>


{% endblock %}

标签： pythonhtmldjangobootstrap-4responsive

python - Python Django Webapp 在智能手机中没有响应

问题描述

解决方案

推荐阅读