Is it possible to detect hardware acceleration by browser in JavaScript?

Question

I've noticed that font sizes are not the same across browsers which use hardware acceleration due to the font rendering changes - making characters appear smaller. On sites with horizontal navigation, this is actually becoming an issue.

Is it possible to use JavaScript or a JS library to detect hardware acceleration as being enabled (or disabled) in the browser?

Modernizr doesn't seem to offer this choice.

Answer 1

The font rendering differs depending on browser, OS and user settings. So your website should deal with such differences gracefully instead of relying on pixel exact font rendering. Hardware acceleration is just one more source of such differences.

Since you're not actually interested in finding out if it is hardware accelerated, but in differences in font rendering how about measuring the size some rendered text has, and adapt your page based on that?

Answer 2

Since you're only interested in the difference of font size across browsers and platforms, it might be worth looking into font size normalizing techniques.

The only one I'm personally familiar with is YUI Fonts CSS. I use it in all my projects and it's used the HTML5Boilerplate project.

There are also css typography frameworks such as the Baseline, Typogridphy, Blueprint (I've looked into this a recommend it if you go down this path) and finally atatonic

Answer 3

Rather than have workarounds for slow rendering, why not use underscore's throttle or debounce to reduce refreshes?

Answer 4

<script type="text/javascript">
<!--
window.onload=function(){
        if(window.screen.availHeight>700 && window.screen.availWidth>1000)
        {
        document.body.style.fontSize="15px";
        }
.................
//another conditions
}
//-->
</script>

you can't get processor speed or ram size but you can make function to know the hardewre strength

<script type="text/javascript">  

 var number=10;  
 var i;  
 var start = (new Date).getTime();  
 //code here  
     for(i=0;i<10000;i++)  
     {  
      number=number*10;  
     }  
 var diff = (new Date).getTime() - start;  
 alert(diff);  

 start = (new Date).getTime();  
 //code here  
     while(i<10000)  
     {  
      number=number*10;  
      i++;  
     }  

diff = (new Date).getTime() - start;  
alert(diff);  

 </script>