JS生成HTML样式异常：媒体查询在桌面端生效，求移动端顶部对齐方案

你遇到的问题根源是html和body元素未设置全屏高度，导致.bankName的height:100%无法撑满整个视口——桌面端的justify-content:center实际上根本没生效，看起来像是移动端的样式全局生效了。

以下是两种可靠的修复方案：

方案一：补全html/body的全屏样式 #

在<style>标签最顶部添加全局样式，确保父元素撑满视口：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

这样.bankName的height:100%会基于全屏高度计算，桌面端的justify-content:center能正常让内容垂直居中，移动端媒体查询的justify-content:start只会在屏幕宽度≤767px时生效。

方案二：改用vh单位替代百分比高度 #

直接把.bankName的height:100%改成min-height:100vh（vh单位直接基于视口高度），无需依赖父元素高度，代码更简洁：

.bankName {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    min-height: 100vh; /* 替换原height:100% */
    justify-content: center;
    background-color:white;
    text-align: center;
    font-family: 'Inter', sans-serif;
    color:rgb(158,158,158);
    margin: 0;
}

修正后的完整代码 #

function generateHTML(bankName) {
    let content = `<div class="bankName" style=""><strong style="font-size: 28px;font-weight: 600;line-height: 48px;">Thank You!</strong>
    <br /><span style="text-align: center; font-family: 'Inter', sans-serif;"> Your <b>${bankName}
    </b> data has been successfully retrieved.</span></div>
    <style>
    .bankName {
        display: flex;
         flex-direction: column; 
         align-items: center; 
         min-height: 100vh;
         justify-content: center;
         background-color:white;
         text-align: center;
        font-family: 'Inter', sans-serif;
        color:rgb(158,158,158);
        margin: 0;
    }

    .bankName strong:after {
        content: '';
        background: rgb(158,158,158);
        height: 1px;
        width: 275px;
        display: block;
        margin-top: 8px;
    }
  @media only screen and (max-width: 767px) {
    .bankName {
        justify-content: start;
        padding-top: 20px; /* 可选：避免移动端内容贴顶过于紧凑 */
    }
  }
    </style>
    `;

    return `data:text/html;charset=utf-8,<html><body>${content}</body></html>`;

}

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