手机字体大小问题

Question

我正在制作一个响应式网站，但我不知道如何解决具有高 dpi 的移动设备的问题。我已经将我的 h2 设置为 2em，我的 p 设置为 1 em，所以 h2 应该是 p 的两倍，对吧？好吧，当我在 Galaxy S4 上处于纵向模式时，它们的尺寸几乎相同。由于某种原因，它在风景中看起来更好。我还注意到，通过使用显示视口宽度的 javascript，galaxy s4 始终为 980px 宽，无论是横向还是纵向，这不是很奇怪吗？

我正在使用

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

但我不确定它是否正常工作。由于我的 S4 纵向视口为 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

Answer 1

不确定是否有帮助，但我通常使用：

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

还请记住，em 是相对的，因此取决于您设置实际字体大小的位置，em 采用不同的值（因此，如果您的 body 设置为 font-size: 14px，您的 h2 将是 28px 字体，但如果您的 h2 是在具有 font-size: 16px 的容器中，h2 将是 32px)

添加：

不知道使用 em 作为断点...我一直使用固定像素。并确保包含设备宽度。例如。对于特定于平板电脑的样式：

@media only screen
and (max-device-width: 979px),
(max-width: 979px) {

Answer 2

body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}