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

Question

我正在开发一个需要在桌面和移动设备上工作的网站.现在我有一个主内容div设置为屏幕宽度的70%.但是,我觉得这对于移动设备来说很小(比如手机,而不是平板电脑),并希望将它提高到90%或95%.我怎么能这样做(比如屏幕尺寸小于5英寸)而不使用非常不可靠的设备浏览器嗅探？我一遍又一遍地听到口头禅"特征检测特征检测特征检测",我理解为什么这是一件好事...但我不知道检测这个问题的"特征"是什么......

谢谢.

Answer 1

你可以使用CSS:

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

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