我正在制作一个响应式网站，但我不知道如何解决高 dpi 移动设备的问题。我已经将 h2 设置为 2em，将 p 设置为 1em，所以 h2 应该是 p 大小的两倍，对吗？当我在 Galaxy S4 上处于纵向模式时，它们的尺寸几乎相同。由于某种原因，它在风景中看起来更好。我还注意到，通过使用显示视口(viewport)宽度的 javascript，galaxy s4 始终为 980 像素宽，无论是横向还是纵向，这不是很奇怪吗？
我正在使用
<meta name="viewport" content="width=device-width, initial-scale=1">
但我不确定它是否正常工作.. 由于我的 S4 纵向视口(viewport)为 980 像素宽，因此通常用于移动设备的断点不起作用。我的手机认为它是平板电脑!
我用谷歌搜索了很多，但似乎没有任何效果。有没有人有任何提示或知道我在哪里搞砸了？
谢谢!
编辑: 我试过了
@media all and (min--moz-device-pixel-ratio: 1.5),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5)
这很有效，我现在可以为所有具有更高像素比的设备设置单独的媒体查询。但是我的 h2 的字体大小仍然很奇怪。我必须将它设置为 4em 以使 h2 大约是纵向 1em p 大小的两倍，但在横向中它要大得多。我手机纵向模式下的字体大小是怎么回事？？ :S
最佳答案
不确定它是否有帮助，但我通常使用:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
还请记住，em 是相对的，因此根据您设置实际字体大小的位置，em 会采用不同的值(因此，如果您的 body 设置为 font-size: 14px，您的 h2 将是 28px 字体，但如果您的 h2 是在字体大小为 16px 的容器中，h2 为 32px)
添加:
不知道如何使用 em 作为断点...我一直使用固定像素。并确保包括设备宽度。例如。对于特定于平板电脑的样式:
@media only screen
and (max-device-width: 979px),
(max-width: 979px) {
关于android - 手机字体大小问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25555027/