例如,在具有大屏幕但没有专用图形卡的笔记本电脑上,规则为:
package guis;
import java.awt.Font;
import org.newdawn.slick.TrueTypeFont;
public class Gui {
private TrueTypeFont font;
private Font awtFont;
public Gui() {
this.awtFont = new Font("Times New Roman", Font.BOLD, 24);
this.font = new TrueTypeFont(awtFont, false);
}
public void drawString(int x, int y, String text) {
font.drawString(x, y, text);
}
}
显着滞后,但仅使用.menu-item:hover {
filter: blur(5px);
}
或@media (max-width: 600px)
查询定位并不容易。
理想情况下,拥有像
这样的东西会很棒@supports
或@performance ("good enough to handle whatever it is in question") {}
媒体查询是否考虑了效果。
这样的事情存在吗?或者有什么方法可以找出类似的东西吗?
答案 0 :(得分:1)
JavaScript可以执行requestAnimationFrame
之类的操作,并在动画期间为FPS计时(使用transition
/ transitionEnd
和animation
/ animationEnd
上的事件注册)然后帧率被认为太低,它可以应用如下的风格:
*, *:before, *:after {
transition-property: none !important;
transform: none !important;
animation: none !important;
/* ... */
}
但是针对低功耗笔记本电脑的仅限CSS的选项...我的建议是首先尝试这个技巧:
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
这将确保它最终使用专用图形卡(如果可用)。它可能足以提升表现。
您可能还想查看@keyframes
,这会在帧速率不一致时提供帮助。
答案 1 :(得分:1)
例如,您可以使用Modernizr检测大多数浏览器功能。请查看the documentation,了解您可以检测到的内容。
但是,没有真正可靠的方法可以通过CSS或JavaScript检测硬件。您可以尝试检测此处所示的FPS:calculate FPS in Canvas using requestAnimationFrame
我发现some code on GitHub可能适合您:
var canvas = document.createElement('canvas');
var gl;
var debugInfo;
var vendor;
var renderer;
try {
gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
} catch (e) {
}
if (gl) {
debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
}
// Sample output:
//
// » console.log(renderer);
// ATI Technologies Inc. AMD Radeon R9 M370X OpenGL Engine
它通过WebGL检测图形硬件供应商名称,因此显然需要支持WebGL的浏览器。如果这对您没有问题,那么这可能就是您所需要的。
关于仅限CSS的解决方案,我担心你会失去运气。