平板电脑和手机上的字体大小差异

Question

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

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

这是它在 iPhone 4S 上的外观：

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

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

iPad 6:   Tickerplaceholder DIV-height: 24pixels, bannerheight: 30px, pixelaspect-ratio: 2
iPhone:   Tickerplaceholder DIV-height: 32pixels, bannerheight: 30px, pixelaspect-ratio: 2
PC (Chrome): Tickerplaceholder DIV-height: 24pixels, bannerheight: 30px, pixelaspect-ratio: 1;

我觉得很奇怪，两个视网膜显示设备以不同的方式显示相同的横幅 - 而 iPad 和 PC 正确显示它们。

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

Answer 1

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

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

在我的项目中，这个解决方案也有效……不过，可能不是那么漂亮。

Answer 2

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

对于文本，如果您使用点来代替，那么跨设备的大小将是相同的 - 它们都将是 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();