CODEWITHSUNDEEP
cssipadsafariviewportios-simulator
themajiks
themajiks

Reputation: 414

Detecting and adjusting the viewport in ipad

I have a question. here goes my test website. Test Website The problem is that, when i veiw in any ipad simulator, like iPad Peek, or oraginal ipad, there appears a vertical scroll bar that i donot want. I want my page to exactly fit the height. The book shall appear in its full form, no scrollers. Can anybody help please?

Upvotes: 0

Views: 4252

Answers (3)

moritz
moritz

Reputation: 25767

I just had precisely the same issue. I had introduced

<meta name="viewport", content="height=device-height, initial-scale=1.0" />

into my html head tag. The nice and shiny iPad just set it's viewport height to 1024px (checked with javascript) whih can't be true because this is its display resolution and it has to display an addressbar, statusbar, etc.

The only fix I could come up with is to rewrite the meta tag with jquery on page load

$(document).ready(function(event){
  $('head meta[name=viewport]').remove();
  var content = "'initial-scale=1.0, height=" + window.innerHeight + "'";
  $('head').prepend("<meta name='viewport' content=" + content + " />");
});

.. that's indeed very nasty, but it worked.

Upvotes: 0

wiseone
wiseone

Reputation: 99

var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
    for (i=0; i< metas.length; i++) {
        if (metas[i].name == "viewport") {
            metas[i].content = "width=device-width, minimum-scale=0.5, maximum-scale=1.0";
        }
    }
    document.getElementsByTagName('body')[0].addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
    for (i=0; i<metas.length; i++) {
        if (metas[i].name == "viewport") {
            metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
        }
    }
}

Upvotes: 0

gtamil
gtamil

Reputation: 552

Use css3 media query to detect and implement viewport

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

Reference: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Upvotes: 1

Related Questions