Question

我的大多数观点都会有5到10个小部件，我正在试图弄清楚如何制作按钮，下拉列表看起来最好。
我已经尝试将它们的尺寸设置为当前屏幕尺寸的％，但对于非常大的屏幕或非常小的屏幕而言，这不是理想的解决方案。移动用户将成为主要的最终用户。实现这一目标的最佳方式是什么？移动用户将能够看到一个体面大小的按钮和一个小屏幕，而PC用户如果全屏则不会看到一些巨大的按钮。

Answer 1

您可以使用ViewPort Meta tag为widths and heights设备上的网络应用程序保持正确的mobile ..而无需更改所有layouts。

The viewport meta tag to control layout on mobile browsers.

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

Achieving min-width with viewport meta tag

Answer 2

在现代浏览器中，除了其他响应中提到的视口以及适用于整个文档的视口外，您还可以使用css scale转换。

请参阅此纯html / css example

我在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);"));

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

2 个答案: