Want an iPhone / iPad / iOS Webpage that is 100% width/height

I’m trying to get a site that is simply 100% of the possible width/height of a device, after scrolling down far enough to get rid of the address bar. Hopefully that makes sense?

I just need the simple dimensions so I can scroll the device to 0,0 and see as much of my page as possible. e.g. simply 320×400 (320 width, 400 might = height – title bar – footer)

  • Split Screen into two division using ionic framwork?
  • addClass on hover for multiple items
  • Would like to close a div when open another div
  • How can I tell if a particular CSS property is inherited with jQuery?
  • How to fix border radius in IE8 (ie7, ie6)
  • Draggable And Margin:0 auto;
  • The reason for this is that I’m putting a single DIV on a page that is a “viewport” into content that moves around, think google maps. I just want this div to fill all available space.

    The problem is that I can’t seem to detect the available window height. I always seem to get the screen size – the title bar – the address bar – optional debug bar – footer. How do I detect the “largest possible size”?

  • How can I move my JS objects smoothly using keyboard input?
  • How to use jQuery UI icons without buttons?
  • Firefox input issues when scaling page
  • jQuery hover isn't functioning after divs are reloaded
  • Prepend all CSS selectors
  • change SVG text to css word wrapping
  • 3 Solutions collect form web for “Want an iPhone / iPad / iOS Webpage that is 100% width/height”

    Put html,body with height:100%; and the div as position:absolute;top:0;bottom:0;left:0;right:0; and then you dont need the exact width/height of the viewport, the div will already use the maximum possible space.

    But if you still want to detect, jQuery got the $(element_you_want).width() and .height() also that might do the trick. Try with document or only body (with 100% height)

    If you’re using javascript, try alerting: ‘innerWidth’;


    Answering this myself:

    var $div = $( '<div></div>' ).appendTo( document.body );
        alert( window.innerHeight + ', ' + window.innerWidth );
    }, 10);

    The basic idea is that I force the window to be larger than I know it can support, remove the address bar then measure the size. I can now go and re-size this div appropriately.