移动端媒体查询与桌面端表现不一致，CSS定位在iPad端显示异常求助

问题排查与解决方向 #

• 优先检查绝对定位的基准容器：你代码中手臂、腿部、心形等元素都设置了position: absolute，但作为父容器的.container没有添加position: relative，导致这些绝对定位的元素默认以整个页面视口为基准偏移，不同设备的视口尺寸差异会直接导致定位错位。先给.container添加position: relative属性，让内部绝对定位元素都以这个容器为基准偏移。
• 修正响应式规则的单位问题：你在max-width: 1350px的媒体查询中大量使用em作为长度单位，而em会继承父元素的字体大小，你的.container设置了font-size: 5px，很容易出现计算偏差，建议换成rem、固定px或者百分比单位。另外手臂动画kirby-wave中使用了10vh作为top基准值，不同设备的视口高度不同，也会导致手臂定位偏移，可替换为相对于容器的固定像素值。
• 替换固定像素的全局偏移值：桌面端样式里.container的margin-left: 700px、.heart的margin-left: 1160px都是固定值，iPad屏幕宽度远小于桌面端，这类固定边距会直接导致元素跑出可视区域或者错位。容器居中不要用固定左外边距，直接设置margin-inline: auto即可适配不同宽度的设备，心形元素也调整为相对于.container的left/top偏移值。
• 检查viewport元标签：如果页面头部没有添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，iPad会默认将页面缩放至桌面端宽度渲染，也会导致样式异常，先确认加上这个适配标签。
• 调整媒体查询断点：你设置的1350px响应式断点过大，常规桌面显示器宽度低于1350px时也会触发你写的移动端适配规则，建议调整为1024px，匹配iPad这类平板设备的屏幕宽度。

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