在平板電腦和手機上的字體大小的差異

我真的希望，你能夠幫助我在這一個，因爲我撕開我的頭髮... 我有一個小的選取框，基於此代碼：http://jsfiddle.net/TCJT4/525提供一些文本。在平板電腦和手機上的字體大小的差異

這裏是它的外觀在iPad上6 ...並請從初步設計忽略，但是這是它應該如何看：

這裏是它的外觀在iPhone 4S：

從完全相同的來源檢索股票代碼，但正如您所看到的，iPhone上的文本顯示較大（iPad圖像縮放，因此看起來更大，但實際上它們都顯示320x30像素佔位符。文本暫時硬編碼o高度爲20像素，我也嘗試過使用其他單位......橫幅在設備上看起來仍然不同。

我對ticker容器/佔位符以及檢測到的橫幅高度進行了一些調試，並禁用了所有文本調整元素。下面是一些屬性的結果：

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;

我覺得很奇怪，兩個Retina顯示屏的設備不同的方式顯示在同一面旗幟 - 而iPad和PC是否能夠正確顯示它們。

的股票也可以在這裏找到在其最新的形式：www.videobanner.dk/ph.html

來源

2017-01-17 Anders

你的問題是什麼？ – JohnH

爲什麼在兩個視網膜顯示器上顯示同一橫幅時高度有差異？ – Anders

該問題的原因與在IOS的Safari一個怪癖或錯誤時，用無序列表處理時，將含有不同長度的文本，其返回一個不正確的和不可預知的高度。當我在不同的平臺上比較不同的文本長度時，這變得很明顯。沒有修復已經找到了，但我可以通過拆分一個字符串來繞過這個問題分成幾個較短的字符串，如

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

在我的項目，該解決方案還適用......也許不是那麼漂亮，雖然。

來源

2017-01-19 18:07:21 Anders

的像素在不同的設備不同的物理尺寸 - 所以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();

來源

2017-01-17 18:14:34 Bob

似乎視網膜顯示器有不同的像素密度，所以它可能是問題 - https：//en.wikipedia。組織/維基/ Retina_Display＃模式 – Bob

在24px的與JS設置其實我已經看到的文字大小在36px由於用戶設置的手機上 - 試圖尺寸文本盒子 - 使用比率的事情來修復它。 – Bob

編輯回答以反映最後2條評論 – Bob

在平板電腦和手機上的字體大小的差異

回答

相關問題