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

Question

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

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

这是它在 iPhone 4S 上的样子：

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

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

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;

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

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

Answer 1

像素在不同设备上的物理尺寸不同 - 因此 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();

Answer 2

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

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

在我的项目中，此解决方案也有效...不过可能不是那么好。

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

Difference in font size on tablets and phones

html

css

iphone

ipad

retina