[英]How can I tell a widget to maximize to fill the whole space available?
I'm developing a widget for mobile phones using the Vodafone Mobile Widget Platform and I'm trying to get it to fill the entire screen. 我正在使用Vodafone移动窗口小部件平台开发用于手机的窗口小部件,并且试图使其填充整个屏幕。 Using height and width to 100% doesn't seem to work as expected.
将高度和宽度设置为100%似乎无法正常工作。 Anyone know what to do?
有人知道该怎么办吗?
First, try adding height="100%" and width="100%" to your body tag as well (not just your container div). 首先,尝试将height =“ 100%”和width =“ 100%”添加到您的body标签中(而不仅仅是容器div)。
If that does not work, try this css in addition to it. 如果那不起作用,请尝试使用此CSS。
html{
width:100%;
height:100%;
}
If that does not work, please provide more information about the page contents that will not fill the entire screen. 如果这样不起作用,请提供有关无法覆盖整个屏幕的页面内容的更多信息。
Ok, try this: 好的,试试这个:
function resizeWidget() {
var availWidth = screen.availWidth;
var availHeight = screen.availHeight;
window.resizeTo(availWidth, availHeight);
}
Check out this document for more info: http://widget.developer.vodafone.com/docs/Different-Resolutions-on-Mobile-Phones-v0.3.4.pdf 请查看此文档以获取更多信息: http : //widget.developer.vodafone.com/docs/Different-Resolutions-on-Mobile-Phones-v0.3.4.pdf
During the execution of a widget, the resolution of the phone can change.
在执行小部件期间,手机的分辨率可能会改变。 For example, newer mobile phones have sensors to detect whether the phone is held horizontally or vertically.
例如,较新的移动电话具有传感器来检测电话是水平放置还是垂直放置。 The Vodafone Apps Manager recognizes such changes and fires a resolution-event every time there is a change.
Vodafone Apps Manager可以识别此类更改,并在每次更改时触发解决方案事件。 To make sure your widget is resized every time the resolution changes, you can add an event listener for the resolutionevent and use the resizeWidget() function as event handler:
为了确保每次更改分辨率时都调整窗口小部件的大小,可以为resolutionevent添加事件侦听器,并将resizeWidget()函数用作事件处理程序:
widget.addEventListener('resolution', resizeWidget, false);
Additionally, you should call the resizeWidget-function when the widget starts, because a user could start the widget in landscape mode.
另外,您应该在小部件启动时调用resizeWidget-function,因为用户可以以横向模式启动小部件。 As the runtime does not raise a resolution-event when this happens you have to call the resizeWidget-function manually.
由于发生这种情况时运行时不会引发解决方案事件,因此您必须手动调用resizeWidget函数。
Try this: 尝试这个:
if (window.widget) {
widget.addEventListener("widgetmodechange", function (e) {
if (!(widget.widgetMode === "widget")) { // not on desktop
window.resizeTo(screen.availWidth, screen.availHeight);
}
}, false);
}
Baa is actually right, except you should bind the listener too "widgetmodechange". Baa实际上是正确的,除了您也应该将监听器绑定为“ widgetmodechange”。 Also, check out the documentation Baa specified.
另外,请查看指定的文档Baa。 It's pretty helpful.
这很有帮助。
I suggest that you use a "too big" width and height in the config.xml like so: 我建议您在config.xml中使用“太大”的宽度和高度,如下所示:
<width>2000</width>
<height>2000</height>
the widget runtime scales down the size. 小部件运行时将按比例缩小大小。 To make it perfect you still need to set the CSS
要使其完美,您仍然需要设置CSS
body, html{
width:100%;
height:100%;
}
to make the widget properly scale to full width and height. 使小部件正确缩放到完整的宽度和高度。 I am working with vf widgets for long and that works best.
我长期使用vf小部件,效果最佳。 NOte: this makes the widget tooo big on the desktop, but a widget for mobile and desktop is rare anyway imho.
注意:这会使小部件在桌面上显得过大,但无论如何,用于移动设备和台式机的小部件都是罕见的。
Wolfram 钨
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.