Home/ Questions/Q 8891821
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T22:50:17+00:00

I’m seeing strange behavior on an iphone 4s device when it comes to specifying

  • 0

I’m seeing strange behavior on an iphone 4s device when it comes to specifying sizes of a div in pixel units.

My iphone is 980 pixels wide in portrait orientation.

As a first test, I just created a plain html implementation. This works exactly as expected – the div takes up the entire width of my screen, but is no wider:

<body>
  <div style="width:980px; height: 30px; background-color: red;"></div>
</body>

Now in GWT, I try the same thing (at least I think it’s equivalent):

FlowPanel fp = new FlowPanel();
fp.setWidth("980px");
fp.setHeight("30px");
fp.getElement().getStyle().setBackgroundColor("red");
RootPanel.get().add(fp);

but when loaded on my iphone, the div appears to be twice the width of the screen. Is GWT doing some kind of scaling automatically? I know the iphone 4S is a retina display, therefore it has a 2x pixel ratio. Is it something related to that?

I can’t examine the output html on my iphone, but when I look at the GWT version in firefox, I can see GWT is indeed outputting the 980px size I specified:

// What GWT outputs - looks the same as my hand-written version:
<div style="width: 980px; height: 30px; background-color: red;"></div>

So why would the GWT version render the div 2x as wide?

—— Update ———-

As Woojah recommended, I tried via a style definition:

.sanityTest {
width: 980px;
height: 30px;
background-color: green;
}

FlowPanel fp = new FlowPanel();
fp.setStyleName("sanityTest");

but still the same behavior – on the iphone 4s screen, the div is twice the width of the display. The dom looks exactly the same as in my handwritten version. The size behaves correctly on a non-retina device.

Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would recommmend you try the following:

    1. do:

      getElement().getStyle.setWidth(x, Style.Unit.PX);
      getElement().getStyle.setHeight(y, Style.Unit.PX);

    That is the equivalent for your
    style="width:980px; height: 30px; background-color: red;

    1. Another alternative is to defina inside your css stylesheed a class like
      .yourCss
      {
      width:980px; height: 30px; background-color: red;
      }

    and then in your code do flowPanel.setStyleName("yourCss");

    • 0