GWT和css:添加动态和全局css规则(又名:防止选择和光标)

Question

我正在用GWT构建一个机器GUI。

这台机器有一个触摸屏面板，所以我不需要查看光标，我也不希望启用选择。

第一个解决方案是把它放在css文件中:

* {
    /* Hide cursor */
    cursor: none;
    /* Prevent selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

这是可行的，但是(总是有一个但是…)我需要从远程浏览器访问这个GUI。

我这台电脑没有触摸屏，只有一个普通的键盘。

所以我希望之前的全局样式没有被应用。

有办法从GWT获得吗?我需要用php代替吗?

谢谢!

Answer 1

您是否尝试过针对不同屏幕尺寸的css定位，即如果触摸屏面板是特定尺寸，那么您可以使用@mediascreen查询仅针对触摸屏，然后继续隐藏光标

Answer 2

您可以使用JSNI来知道它是否是触摸设备。

if (isTouchDevice())
{
         panel.addStyleName("cursorClass");
}
else
{
         panel.addStyleName("noCursorClass");
}

您的JSNI类将是

private native boolean isTouchDevice() /*-{
return !!('ontouchstart' in window) // works on most browsers 
      || !!('onmsgesturechange' in window); // works on ie10
}-*/;

在web开发人员中测试了上述Javascript，它对我来说工作得很好。

你的css类将是

.cursorClass{
cursor : pointer;
}
.noCursorClass{
cursor : none;
}