屏幕尺寸Media Query在笔记本生效，iPhone 5端未触发问题求助

核心原因：缺少Viewport Meta标签 #

iPhone 5这类移动设备的浏览器默认采用桌面视口模式（通常以980px左右的逻辑宽度渲染页面），即便物理屏幕宽度只有320px，浏览器也会先按桌面宽度渲染后再缩放适配。这就导致你的max-width:750px媒体查询无法触发——浏览器识别的视口宽度远大于750px，和物理屏幕尺寸不匹配。而笔记本浏览器缩放时是直接调整视口宽度，所以媒体查询能正常生效。

解决步骤 #

在HTML的<head>标签中添加以下Viewport Meta标签，强制浏览器将视口宽度匹配设备物理宽度：

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

• width=device-width：让视口宽度等于设备逻辑宽度（iPhone5对应320px）
• initial-scale=1.0：设置初始缩放比例为1，避免页面默认缩放

添加后，浏览器会以设备实际逻辑宽度渲染页面，你的max-width:750px媒体查询就能在iPhone5上正常触发。

额外验证点 #

1. 可通过JS代码实时查看当前视口宽度，确认是否符合预期：

console.log('当前视口宽度:', window.innerWidth);

在iPhone5上应输出320px，此时媒体查询会生效。
2. 你的媒体查询语法@media only screen and (max-width: 750px)是正确的，笔记本缩放正常也验证了这一点，无需调整。

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