CODEWITHSUNDEEP
htmlcssviewport
Ch1ken
Ch1ken

Reputation: 81

Ipad viewport portrait issue

I have a web page that comes up on an ipad. My body web page has a width of 960px and a variable height.

I added this meta for the viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

I want to see 100% of my web page on the sceen. It works well in landscape but I am not able to find how to modify my viewport to see 100% of my webpage in landscape and in portrait.

Currently I see 60% of the width of my webpage in portrait.

I do not want to add a JS script or media queries. My webpage is not responsive.

Upvotes: 0

Views: 123

Answers (2)

Ch1ken
Ch1ken

Reputation: 81

I reach my goal by using this code :

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
    body {
    width: 768px;
    }
}

Apparently it is a specific code for Ipad but it work well with Nexus 9.0 and surface too.

If somebody has JS script to do exactly the same I would be interested to check it.

Upvotes: 1

Lars Koole
Lars Koole

Reputation: 488

You have a static width, and the iPad has a smaller width in portrait mode. Solving this without adjusting your static width will be impossible. Maybe you should still consider JS or media queries. Here is a website with more information about dimensions: http://www.websitedimensions.com/

Upvotes: 2

Related Questions