已配置viewport的网页手机端文字过小 调initial-scale图片溢出如何解决

1. 调整viewport元标签配置 #

文字过小的核心原因是当前initial-scale设置为0.46，相当于页面整体被缩小了54%，直接调整为1即可还原正常显示比例。
将原有viewport标签替换为：

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

如果不需要用户手动缩放页面，可以追加user-scalable=no参数。

2. 新增全局图片响应式规则，避免图片溢出 #

在现有<style>标签内追加以下样式，让所有图片自动适配父容器宽度，不会超出屏幕边界：

img {
    max-width: 100%;
    height: auto;
}

如果需要保留顶部banner图的固定90px高度，可以单独给#s1补充样式：

#s1 {
    height: 90px;
    object-fit: cover;
}

3. 可选优化：替换固定字体单位为相对单位 #

当前所有字体均使用固定px单位，在不同尺寸的手机上显示效果差异较大，可以替换为rem或vw等相对单位，实现字体随屏幕尺寸自动适配：

/* 根元素基准字体大小，随屏幕宽度动态调整 */
html {
    font-size: calc(14px + 0.6vw);
}
/* 原有固定px替换为rem，1rem = 根元素字体大小 */
#s2 {
    font-size: 2.2rem;
}
#s3 {
    font-size: 1.25rem;
}

另外可以顺便修正原有代码的笔误：<meta name="description" conten="CPU benchmark">中的conten属性名错误，改为content即可。

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