Quart渲染模板网站多设备显示异常及加载问题求助

一、移动端显示异常修复 #

• 添加viewport元标签：在HTML的<head>中加入核心适配代码，确保页面宽度匹配设备屏幕：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

• 改用响应式布局：
  • 替换固定宽度属性（如width: 1200px）为百分比、max-width或弹性布局：

    .container {
      max-width: 1200px;
      width: 90%;
      margin: 0 auto;
    }
    

  • 针对移动端屏幕添加媒体查询，调整元素样式：

    @media (max-width: 768px) {
      .nav-item {
        display: block;
        margin: 10px 0;
      }
    }
    

• 排查样式优先级冲突：移除PC端样式中!important等强制优先级属性，确保媒体查询内的移动端样式能正常生效。

二、多次刷新才显示页面修复 #

• 设置缓存控制头：在Quart路由中禁用浏览器缓存，避免加载旧页面：

  @app.route('/')
  async def index():
      data = await get_data()  # 你的数据获取逻辑
      response = await render_template('index.html', data=data)
      response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
      response.headers['Pragma'] = 'no-cache'
      response.headers['Expires'] = '0'
      return response
  

• 确保数据加载完成再渲染：
  • 检查路由中异步数据请求是否已正确等待，确保所有数据准备完毕后再传递给模板。
  • 在模板中添加数据存在性判断，避免空白页面：

    {% if data %}
      <!-- 渲染数据内容 -->
    {% else %}
      <p>加载中...</p>
    {% endif %}
    

• 排查静态资源加载问题：
  • 使用url_for('static', filename='xxx.css')规范引用静态文件，避免路径错误。
  • 压缩CSS/JS文件大小，或使用CDN加速静态资源加载。
• 添加异常捕获：在路由中捕获数据获取或渲染异常，避免页面崩溃：

  @app.route('/')
  async def index():
      try:
          data = await get_data()
          return await render_template('index.html', data=data)
      except Exception as e:
          app.logger.error(f'渲染页面出错: {e}')
          return await render_template('error.html'), 500
  

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