CSS mobile - portrait orientation after fullscreen

2
votes

I have a website for mobile devices. I have problem with portrait/landscape when returning back from full-screen mode.

  1. I have device in landscape mode.
  2. I go to a page which triggers browser full-screen mode.
  3. Now when I click on some link and got redirected on other page, full-screen is disabled. That's correct.
  4. However, now when I switch to portrait mode, website acts like in landscape mode. Computed width is the same value as in landscape mode. This happens only after return from full-screen mode.

My content div has set width: 100%;

2
htmlcssmobilefullscreenlandscape-portrait

2 Answers

1
votes

Try setting max-width to 100%. This specifies the width should never be more than 100%

width only sets the initial value, it does not re-calculate every time the screen size changes

0
votes

Setting width explicitly after orientation changed helped.

$(window).on("orientationchange", function (e) {

    $(".page-content").width(screen.width);
});