CODEWITHSUNDEEP
csshtmliframescreen-orientation
sthor69
sthor69

Reputation: 668

Width of iframe not updated after orientation change

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.

Upvotes: 0

Views: 2545

Answers (1)

NoobEditor
NoobEditor

Reputation: 15871

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

Upvotes: 2

Related Questions