gwt - 保持 GWT 小部件大小与屏幕大小成比例

Question

我的大多数视图将有 5 - 10 个小部件，我正在尝试弄清楚如何使按钮、下拉菜单看起来最好。
我尝试将它们的尺寸设置为当前屏幕尺寸的百分比，但这对于非常大或非常小的屏幕来说不是一个理想的解决方案。移动用户将是主要的最终用户。实现这一点的最佳方法是什么所以移动用户实际上将能够在小屏幕上看到一个大小合适的按钮，而如果 PC 用户是全屏的，则最终不会看到一些巨大的按钮。

Answer 1

您也可以使用ViewPort Meta 标签来维护widths and heights您在设备上的 Web 应用程序的正确性。无需mobile更改所有layouts.

The viewport meta tag to control layout on mobile browsers.

另请参阅下面的问题，我已经回答了设置视口。

使用视口元标记实现最小宽度

Answer 2

在现代浏览器中，除了另一个响应中提到的适用于整个文档的视口之外，您还可以使用 css 缩放转换。

请参阅这个纯 html/css示例

我在 GWT 中所做的是，我是否有不同的 .ui.xml 或 css 包用于具有不同比例值的桌面和移动排列，或者我通过代码更改它（根据窗口大小、浏览器类型等计算比例因子）。

在第二种情况下，您可以使用 gwt 元素方法：

 panel.getElement().getStyle().setProperty("WebkitTransform", "scale(0.65, 0.65)");
 panel.getElement().getStyle().setProperty("MozTransform", "scale(0.65, 0.65)");

或者我宁愿使用gwtquery语法：

$(panel).css($$("-webkit-transform: scale(0.65, 0.65); -moz-transform: scale(0.65, 0.65);"));