移动端媒体查询正常，平板端媒体查询失效求助

一、平板媒体查询不生效的核心错误 #

你平板端的媒体查询代码里犯了一个低级但致命的错误：max-width: 1023 没有加单位 px。CSS中所有长度类属性值必须明确单位，浏览器会忽略不带单位的无效值，导致整个平板的媒体查询条件不成立，自然不会应用对应的样式。

修正后的平板媒体查询代码应该是：

@media only screen and (min-width: 640px) and (max-width: 1023px) and (orientation: portrait) { 
  /* CSS FOR TABLET PORTRAIT */
}

@media only screen and (min-width: 640px) and (max-width: 1023px) and (orientation: landscape) {
  /* CSS FOR TABLET LANDSCAPE */
}

二、额外排查点 #

除了单位问题，再检查这两个关键项：

• 是否添加了viewport元标签：在HTML的<head>里必须加入以下代码，否则平板会以桌面端的缩放比例渲染，导致视口宽度识别错误：

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

• 样式优先级冲突：你的桌面端媒体查询是min-width:960px，和平板端的640px-1023px区间有重叠（960-1023px）。如果桌面端的样式选择器优先级更高（比如用了ID、嵌套层级更多），会覆盖平板端样式。可以给平板端的关键样式加!important临时测试，或者调整选择器优先级。

三、关于分享网站链接的安全风险 #

• 如果是公开对外分享：存在一定风险，比如可能被爬虫抓取内容、遭遇简单的恶意测试（如表单注入），如果网站包含未脱敏的个人/用户数据，还可能泄露隐私。
• 如果是分享给信任的开发者/朋友排查问题：只要确保网站没有敏感数据、后台入口未暴露，一般没问题。如果是本地内网搭建的链接，外网无法访问，风险更低。

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