如何阻止博客帖子在移动端滚动时缩小变形？

核心问题分析 #

1. 缺少移动端视口适配标签：你的base.html中没有添加viewport元标签，这会导致移动端浏览器以桌面端视口宽度渲染页面，滚动时出现缩放变形。
2. 卡片布局使用不当：每篇帖子单独使用card-deck，card-deck是用于一行内多卡片等高布局的组件，单个卡片无需嵌套其中，反而会引发响应式布局异常。

修复步骤 #

1. 为base.html添加viewport元标签

在<head>标签内添加以下代码，确保移动端正确适配屏幕：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

修改后的base.html完整代码：

{% load static %}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>  {% block title %}{% endblock %}  </title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="shortcut icon" href="{% static 'website/favicon.ico' %}" />
</head>
<body>
  {% include 'top-menu.html'%}
  <div class="container">
    {% if messages %}
     {% for message in messages %}
       <div class="alert alert-{{message.tags}} alert-dismissible fade show" role="alert">
         <strong>{{ message }}</strong>
           <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
       </div>
      {% endfor %}
    {% endif %}
    {% block content %}
  </div>
  {% endblock %}
</body>
</html>

2. 调整post.html的卡片布局

移除单个卡片外的card-deck，改用栅格系统的row和col来包裹卡片，确保在不同屏幕尺寸下都能正常展示：

修改后的post.html完整代码：

{% block content %}
<div class="container">
  <div style="margin-top: 25px"></div>
  <!-- 使用栅格系统替代card-deck -->
  <div class="row">
    <div class="col-12">
      <div class="card mb-4 box-shadow">
        <div class="card-header" id="linkilink">
          <h4 class="my-0 font-weight-normal">{{post.title}}</h4>
        </div>
        <div class="card-body">
          {{ post.body|truncatewords_html:30 }}
          <hr>
          <p> 
            <a href="{% url 'userinfo' %}">
              <img class="rounded-circle article-img" src="{{ post.author.profile.image.url }}" width="75" height="75">
            </a> 
            <div style="color: rgb(133, 131, 131);"> Author: {{ post.author }} </div> 
          </p>

          <a href="{% url 'detail' post.id %}" class="btn btn-info btn-small" id="readbutton">
            Read More 
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
              <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
            </svg>
          </a>

          {% if user.is_authenticated %}
            {% if user == post.author%}
              <a href="{% url 'update' post.id %}" class="btn btn-primary btn-small" >Update</a>

              <a href="#myModal" class="btn btn-danger btn-small" id="deleteButton" data-toggle="modal" data-target="#myModal">
                Delete 
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                  <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
                  <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
                </svg>
              </a>
            {% endif %}
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  {% if user == post.author%}
  <div>
    <div id="myModal" class="modal fade">
      <div class="modal-dialog modal-confirm">
        <div class="modal-content">
          <div class="modal-header">
            <div class="icon-box">
            </div>                
            <h4 class="modal-title">Are you sure?</h4>    
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            <p  class="text-muted">Do you really want to delete {{ post.title }}? This process cannot be undone.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <a type="button" class="btn btn-danger" href="{% url 'delete' post.id %}">Delete</a>
          </div>
        </div>
      </div>     
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}

补充说明 #

• viewport标签是移动端页面适配的核心，必须添加才能让浏览器正确识别屏幕宽度。
• 如果需要展示多列卡片列表，可将col-12改为col-md-6 col-lg-4这类响应式类，实现不同屏幕下的多列布局，避免卡片过度缩小。

内容的提问来源于stack exchange，提问作者Ariky Hito