javascript - 如何检测手机浏览器的屏幕尺寸？

Question

我正在开发一个需要在桌面和移动设备上运行的网站。现在我有一个主要内容 div，它设置为屏幕宽度的 70%。但是，我觉得这对于移动设备(比如手机，而不是平板电脑)来说太小了，我想把它提高到 90 或 95% 我怎么能做到这一点(比如屏幕尺寸小于 5 英寸)而不使用非常不可靠的浏览器嗅探？我一遍又一遍地听到“特征检测 feature detection feature detection”这句口头禅，我明白为什么这是一件好事......但我不知道这个问题要检测什么“特征”......

谢谢。

Answer 1

您可以使用 CSS:

@media screen and (max-width:500px) {
  /* smaller screens */
}

@media screen and (max-width:960px) {
  /* bigger screens */
}