タブレットと携帯電話のフォントサイズの違い

Question

私は、私の髪を引き裂いているので、この1つで私を助けてくれることを本当に願っています... 私はこのコードに基づいて小さなマーキーを持っています：http://jsfiddle.net/TCJT4/525テキストを入力します。ここで

は、それがiPadの6の上にどのように見えるかだ...予備設計から無視してください、これは、それがどのように見えるべきかです：

ここではiPhone 4Sにどのように見えるかです：

ティッカーは正確に同じソースから取得されますが、わかるように、iPhoneではテキストが大きく表示されます（iPadの画像は拡大されているため、大きく表示されますが、実際には320x30ピクセルのプレースホルダー。テキストは一時的にハードコードされます。 o高さが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; 

私は2つのレティナディスプレイデバイスが異なっ同じバナーを表示すること、それは非常に奇妙見つける - と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> 

など、いくつかの短い文字列に1つの文字列を分割することで問題を回避することができたん、このソリューションは、しかし、それはかなりではないかもしれない...働きません。

Answer 2

ピクセルは、異なるデバイス上で異なる物理的なサイズです - そうは24pxは別のよりも1つのデバイス上に小さいです。

代わりにポイントを使用すると、デバイスのサイズが同じになります。すべてが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();