태블릿 및 휴대 전화의 글꼴 크기 차이

Question

나는 내 머리카락을 찢어 내고 있기 때문에 정말 도움이 될 것입니다. 이 코드를 기반으로 조금 윤곽이 있습니다 : http://jsfiddle.net/TCJT4/525 일부 텍스트를 피드합니다. 이 예비 설계에서 무시하십시오 아이 패드 6에 보이는 ... 그리고 방법은 다음과

이다, 그러나 이것은이다 그것은 보는 방법 : 여기

이의 IT 아이폰 4S에 보이는 방법 :

시세표는 똑같은 소스에서 검색되지만 아이폰에서는 텍스트가 더 크게 보입니다 (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; 

나는이 레티 나 디스플레이 장치는 다르게 같은 배너를 표시하는 것이 매우 이상한 찾기 - 아이 패드 있음과 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로 만듭니다. 관리자의 계산 된 크기는 스타일이 지정된 크기와 다를 수 있습니다.이 문제를 해결하려면 어딘가에서 값을 설정하고 렌더링 할 때 실제로 무엇이 있는지 알아야하며 당신이 원하는 것 (자바 스크립트를 통해). 주어진 픽셀 크기의 상자에 텍스트가 맞는지 확인하기 위해 과거에는 이와 같은 코드를 사용했습니다.

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();