JavaScriptのブラウザによるハードウェアアクセラレーションを検出することは可能ですか?
-
28-10-2019 - |
質問
フォントのレンダリングの変更によりハードウェアアクセラレーションを使用するブラウザ間でフォントサイズが同じではないことに気付きました - 文字が小さく見えます。水平ナビゲーションがあるサイトでは、これは実際には問題になりつつあります。
JavaScriptまたはJSライブラリを使用して、ブラウザで有効になっている(または無効)されているハードウェアアクセラレーションを検出することは可能ですか?
Modernizrはこの選択を提供していないようです。
解決
フォントレンダリングは、ブラウザ、OS、ユーザー設定によって異なります。したがって、あなたのウェブサイトは、ピクセルの正確なフォントレンダリングに依存するのではなく、そのような違いを優雅に扱う必要があります。ハードウェアアクセラレーションは、このような違いのもう1つのソースにすぎません。
ハードウェアが加速されているかどうかを実際に見つけることに興味がないので、フォントレンダリングの違いで、レンダリングされたテキストのサイズを測定して、それに基づいてページを調整しますか?
他のヒント
ブラウザやプラットフォーム間のフォントサイズの違いにのみ興味があるため、フォントサイズの正規化手法を調べる価値があるかもしれません。
私が個人的に精通しているのはです Yui Fonts CSS. 。私はすべてのプロジェクトでそれを使用し、それは HTML5BOILERPLATE 事業。
などのCSSタイポグラフィフレームワークもあります ベースライン, Typogridphy, 青写真 (私はこれを調べました。あなたがこの道を下った場合はそれを推奨します)そして最後に アタトニック
遅いレンダリングのための回避策を持っているのではなく、なぜ使用してみませんか アンダースコアリフレッシュを減らすためのスロットルまたはデバウンス?
<script type="text/javascript">
<!--
window.onload=function(){
if(window.screen.availHeight>700 && window.screen.availWidth>1000)
{
document.body.style.fontSize="15px";
}
.................
//another conditions
}
//-->
</script>
プロセッサの速度やRAMサイズを取得することはできませんが、機能を作るために機能を作ることができます。
<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>