要使手机端图片保持原始尺寸，需设置viewport元标签、显式声明width/height属性、禁用响应式行为，并可选添加横向滚动容器。
图片在手机端默认可能被浏览器缩放或拉伸，要让它保持原始尺寸（即 CSS 像素尺寸 = 图片文件自身的宽高），关键不是“强制放大”，而是阻止浏览器自动缩放、不拉伸、不响应式压缩，同时适配屏幕宽度限制。
设置 viewport 元标签
这是前提，否则移动端浏览器会以桌面模式渲染，再缩放显示，导致图片尺寸失真：
- 在
中加入：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> -
特别注意：去掉
maximum-scale或设为足够大（如maximum-scale=5.0），否则某些安卓浏览器可能截断大图；若仅需防缩放，user-scalable=no可省略，更友好。
给图片设明确的 width 和 height（推荐内联或 class 控制）
避免浏览器按父容器比例重算尺寸。用图片真实像素值（如 320×240）直接设定：
- HTML 写法示例：
<img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="描述"> - CSS 补充（防止被其他样式覆盖）：
img[width] { max-width: none; height: auto; }—— 确保 height 不被等比拉高 - 不推荐只写
width: 320px，因为部分浏览器仍会等比缩放 height；显式声明height属性更可靠。
禁用响应式图片行为
现代浏览器对 <img> 默认启用响应式逻辑（尤其有 srcset 或父容器 max-width: 100% 时），需主动关闭：
- 移除
srcset和sizes属性（除非你手动控制多倍图） - 确保父容器没有
max-width: 100%或width: 100%类样式影响图片 - 可加 CSS 强制固定尺寸：
img { width: 320px !important; height: 240px !important; object-fit: unset; }
处理超宽图的可滚动场景（可选增强）
如果原始图宽度 > 手机屏幕（如 1200px 宽图），又必须原尺寸显示，用户需左右滑动查看：
- 用容器包裹图片并开启横向滚动：
<div style="overflow-x: auto; white-space: nowrap;"><img style="max-width:90%" style="max-width:90%"></div> - 配合
img { display: inline-block; vertical-align: top; }防止换行和空白间隙
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
