Question

我正在建立一个响应式网站，我无法弄清楚如何使用高dpi的移动设备解决问题。我把我的h2设置为2em而我的p设置为1 em，所以h2的大小应该是p的两倍，对吗？当我在Galaxy S4上处于纵向模式时，它们的大小几乎相同。由于某种原因，它在景观中看起来更好。我还注意到通过使用javascript来显示视口的宽度，即星系s4总是980px宽，无论是横向还是纵向，都不是很奇怪吗？

我正在使用

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

但我不确定它是否正常工作..因为我的S4肖像视口宽度为980px，通常用于移动设备的断点不起作用。我的手机认为它是平板电脑！

我已经google了很多，但似乎没有任何工作。有没有人有任何提示或知道我搞砸了哪里？

谢谢！

编辑：我试过了

@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取不同的值（所以如果你的身体设置为font-size：14px你的h2将是28px字体，但如果你的h2是在容器中，字体大小为：16px，h2为32px）

补充：

Dunno关于使用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%;
}

移动设备的字体大小问题

2 个答案: