deviceXDPI 속성 예제

<SCRIPT>
str='screen.deviceXDPI='+screen.deviceXDPI+'<BR>';
str+='screen.deviceYDPI='+screen.deviceYDPI+'<BR>';
str+='논리적 스케일 비율='+screen.deviceXDPI/screen.logicalXDPI+'<BR><BR>';
str+='screen.logicalXDPI='+screen.logicalXDPI+'<BR>';
str+='screen.logicalYDPI='+screen.logicalYDPI+'<BR>';
str+='수평/수직 DPI 비율='+screen.logicalXDPI/screen.logicalYDPI;
document.write(str);
</SCRIPT>

수동으로 deviceXDPI 속성을 이용하여 논리적 스케일을 조정하는 예제

이 예제는 사용자의 가 보통보다 높을 때 수동으로 스크린 스케일을 조정하여 body 개체에 zoom을 적용하여 맞춰준다. 일반적으로는 필요 없는 것이고 브라우저가 스크린 스케일을 조정하지 못할 때 해당한다.

간단하나 잘못하면 높은 해상도에서와 같아진다. 정밀한 조정은 문서의 배치(layout)에서 개별 엘레멘트나 엘레멘트들의 구룹의 속성을 수정하며 가능하다.

<SCRIPT>
function doScale(){
  normalDPI=96; // 보통의 DPI
  if ((screen.deviceXDPI==screen.logicalXDPI)&&(screen.deviceXDPI>normalDPI)){
    document.body.style.zoom=normalDPI/screen.logicalXDPI;
  }
  str='screen.deviceXDPI='+screen.deviceXDPI+'<BR>';
  str+='screen.deviceYDPI='+screen.deviceYDPI+'<BR>';
  str+='논리적 스케일 비율='+screen.deviceXDPI/screen.logicalXDPI+'<BR><BR>';
  str+='screen.logicalXDPI='+screen.logicalXDPI+'<BR>';
  str+='screen.logicalYDPI='+screen.logicalYDPI+'<BR>';
  str+='수평/수직 DPI 비율='+screen.logicalXDPI/screen.logicalYDPI;
  showA.innerHTML=str;
}
</SCRIPT>
<P><BUTTON onclick=doScale()>수동 스케일링</BUTTON>
<DIV id=showA style=height:8.4em>결과 표시창</DIV>