Width of iframe not updated after orientation change

Question

I'm trying to develop a very simple mobile web app to show a list of websites via iFrame. The app starts always in protrait mode and when it switches to landscape mode, the width of the iFrame is not updated, so the iframes does not fill the device width when rotating in landscape mode. I added the script in HTML to force the app to reload the iframe in case of orientation change, hoping it would have solved the issue, but without success.

This is my HTML code

<!DOCTYPE html>
<html>
    <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    </head>
    <body>
        <script>
           var supportsOrientationChange = "onorientationchange" in window,
           orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

           window.addEventListener(orientationEvent, function() {
              window.location.reload()
           }, 
    }
    onload = addNumber;
    </script>

    <iframe id="wc1" src="http://<url>" seamless></iframe>
    <iframe id="wc2" src="http://<url>" seamless></iframe>
    <iframe id="wc3" src="http://<url>" seamless></iframe>
    <iframe id="wc4" src="http://<url>" seamless></iframe>
   </body>

This is my CSS code

html, body {
  width:100%;
  height:100%;
  padding:0;
  border:0;
  margin:0;
}

iframe {
  width:100%;
  height:100%;
  padding: (0, 0, 0, 0);
}

I'm a mobile web development newbie and I swore that I tried every single solution I found on SO and other sites to make my code working, but without success.

did you try adding 'display: block;' to your iframe css rule? — taxicala, Jan 20 '14 at 14:35
why is `meta` in `body` and not in `head`...ohh wait....where is `head`??? — NoobEditor, Jan 20 '14 at 14:37
@NoobEditor : No, the OP beheaded their page - you beat me to it though. — wickywills, Jan 20 '14 at 14:46
Didn't anyone noticed I forgot to include the tag for the CSS. Blame on me for wasting precious SO resources due to my head out of my neck!! — sthor69, Jan 20 '14 at 16:34
@sthor69 : `head` and `neck` are important...coding without following standards in a good practice....particularly in HTML as its has to be cross browser....!! and as for `link`...yeah,it got missed coz ur code was badly formatted in terms of standard...it's done now...so it ok...cheers!! :) — NoobEditor, Jan 20 '14 at 16:37

score 2 · Answer 1 · edited May 23 '17 at 12:28

2

you have set javascript as :

var supportsOrientationChange = "onorientationchange" in window,
           orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

           window.addEventListener(orientationEvent, function() {
              window.location.reload()
           },/*<= what is this bracket closing, and why extra comma???*/ 
    }
    onload =  addNumber;

remove evrything and just keep this :

window.addEventListener("orientationchange", function() {
      window.location.reload();
}, false);

also, for pure html way to check orient, add this in you head :

<meta http-equiv="refresh" content="1">

check this thread too => Detect change in orientation using javascript

edited May 23 '17 at 12:28

Community

1
1

answered Jan 20 '14 at 16:14

NoobEditor

15,563
19
81
112

the false disappeared when copy&pasting. Thanks for the suggestion, it deserves a +1 :-) But it does not solve the issue. See my comment above... :-( – sthor69 Jan 20 '14 at 16:32
yes, thanks. I still have to study a lot more, but overall to practice... I really deserve a -1 :) – sthor69 Jan 20 '14 at 16:52
@sthor69 : shall i do -1?? ;) – NoobEditor Jan 20 '14 at 17:07

Width of iframe not updated after orientation change

1 Answers1