平板电脑和手机的字体大小不同

Question

我真的希望，你能帮助我解决这个问题，因为我正在撕扯我的头发...... 我有一个小字幕，基于这个代码：http://jsfiddle.net/TCJT4/525，它提供一些文本。

以下是它在iPad 6上的外观......请忽略初步设计，但这应该是它的外观：

以下是它在iPhone 4S上的外观：

从完全相同的来源检索自动收报机，但正如您所看到的，iPhone上的文字显得更大（iPad图像被缩放，因此看起来更大，但实际上，它们都显示320x30像素的占位符。文本暂时硬编码为20px高度，我也尝试过使用其他单位......横幅在设备上看起来仍然不同。

我对自动收报器容器/占位符进行了一些调试，以及检测到的横幅高度并禁用了所有文本调整元素。这是一些属性的结果：

? - convert([a,[a,a],[a,b],[b,a],[[a,b]],[d],c],X).
X = [a,c,[a],[d],[a,b],[[a,b]]]
yes

? - convert([[a,[a,b]],[a,[c,b]],[[a,b],a]], X).
X = [[a,[a,b]],[a,[b,c]]]
yes

? - convert([[a,b],[a,[a]],[a,b,c]],X).
X = [[a,b],[a,[a]],[a,b,c]]
yes

我发现很奇怪两个retinadisplay设备以不同的方式显示相同的横幅 - 并且iPad和PC正确显示它们。

也可以在此处找到最新形式的代码：www.videobanner.dk/ph.html

Answer 1

像素在不同设备上的物理尺寸不同 - 因此一台设备上的24px小于另一台设备上的像素。

对于文字，如果您使用的是点数，那么不同设备的大小将相同 - 它们都会产生72pt 1英寸（左右）。

当然这意味着您必须使用文本而不是位图等。

移动设备也可能有一个缩放级别设置为可读性（由用户），这也会影响大小 - 例如，您指定24pt或px，浏览器使其为36pt或px - 检查器中的计算大小将不同对于样式大小 - 要解决这个问题，你需要在某个地方设置一个值，然后看看渲染时它实际上是什么，并应用一个比例来获得你想要的东西（通过javascript）。我过去曾使用这样的代码来确保文本符合给定像素大小的框;

var fontScale = 1 ;
var mySpecifiedFontSize = 24 ; 
var myTextElement = document.getElementById("MY_TEXT_ELEMENT_ID") ;
function fontScalingCorrection(){
    var style = window.getComputedStyle(myTextElement);
    var fontSize = parseInt(style["font-size"]);
    if(!isNaN(fontSize)){
        if(fontSize !== mySpecifiedFontSize){
            fontScale =  (mySpecifiedFontSize / fontSize) * fontScale  ; //allows for multiple calls
            myTextElement.style.fontSize = (fontScale * mySpecifiedFontSize) + "px" ; //or units used
        }
    }
}
//after the element has been drawn once ( or use another element as a size marker )
fontScalingCorrection();

Answer 2

问题的原因与iOS Safari中的怪癖或错误有关，在处理包含各种长度的文本的无序列表时，它返回了不正确且不可预测的高度。当我在不同平台上比较不同的文本长度时，这变得很明显。没有找到修复，但我能够通过将一个字符串拆分成几个较短的字符串来解决问题，例如

<li>This is a text that </li><li>doesn't go well with iOS</li>

在我的项目中，这个解决方案也有效......也许不是那么漂亮。