CODEWITHSUNDEEP
htmlipadsafariviewport
jbx
jbx

Reputation: 22128

Meta viewport not scaling website on iPad

I have a (rather simple) website that I wish to automatically scale and adjust such that the main content area fits in the screen without horizontal scrolling on iPad. On Landscape mode it works fine, however on portrait mode it leaves out part of it on the side, and the user has to scroll horizontally. It normally works fine for other websites I did, but for this one I can't understand what is stopping Safari from doing this.

I added the following line at the top of the HTML but it doesn't seem to have any effect (I tried various alternatives like adding the initial-scale=1.0 etc. too)

<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

What could be the reason this is not working?

Clarification

I am not looking for a media query solution. I am just trying to understand why for some sites the iPad (and other touch devices) automatically scale down a website to fit on screen, while in this case something is causing it not to. I am just trying to identify the reason for it.

Upvotes: 3

Views: 2397

Answers (6)

LachoTomov
LachoTomov

Reputation: 3689

What I'm noticing is that Safari by default scales the web page automatically. However if the user manually applies some scaling - Safari stops its automatic scaling. In my case this was the reason why it scaled some sites and others don't.

Upvotes: 0

jbx
jbx

Reputation: 22128

I finally figured out the problem. iPad (and most touch devices) actually scale the website automatically, without the need of the <meta name="viewport" ... > if the website is not explicitly designed to be responsive.

However, this scaling does not seem to work when the website is too wide. My content was 1024px wide, which for some reason was triggering the devices to turn off scaling.

I changed the content's width to 960px (I don't know the actual threshold, but my other site that scales well had this width) and the issue was immediately fixed.

Adding this answer in case someone is looking for a reason why scaling is not working on his site.

Obviously this is not related to having a responsive site, this is just when the website is simple and scaling is enough.

Upvotes: 0

Verhaeren
Verhaeren

Reputation: 1661

I think the meta tag has a minimum scale besides the maximum:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

What I don't know is if it will make any difference at this point.

It should work in theory, along with:

@media only screen and (min-width: 480px) {
    /* landscape */
}

@media only screen and (max-width: 479px) {
    /* portrait */
}

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

there is fixed width given for inner container

div#branding{
 width: 1024px;
}

#content{
 width: 1024px;
}

div#footer{
 width: 1024px;
}

change all the 3 width to 100% for @media screen

more information on @media screens can be found here 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
    div#branding {
        width: 100%;
    }
    #content {
        width: 100%;
    }
    div#footer {
        height: 40px; /* remove height */
        display: inline-block; /* change display:block to display: inline-block; */
    }
}

and it will work

the right side footer content will come down as the left side content is more

screenshot

note : your footer will broke as fixed height is given you can remove it

for fixing your footer change css for footer

div#footer {
 height: 40px; /* remove height */
 display: inline-block; /* change display:block to display: inline-block; */
}

screenshot

Upvotes: 2

Zlatko Vujicic
Zlatko Vujicic

Reputation: 353

Depending on rules you got in your CSS you will need to assign portrait mode such as landscape or portrait and add desired width also.

@media screen and (orientation:landscape) and (max-width:1024px){
    some rules that will be applied to iPad in landscape mode
}

And big big difference is this, which will be applied on all 1024px screens

@media screen and (max-width: 1024px){
    some css rules for "normal" screens on max-width: 1024px
}

EDIT: So make sure that you put your "container" divs on 100% in various modes and adjust all other elements. the scrollbar you got is actually DOM element with fixed div or margins and paddings that affect width of whole page

Upvotes: 1

Zapp
Zapp

Reputation: 232

I used width:100% and it solves my orientation layout situations, but there seems to be media queries that can help too: 

@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

Check this site out for more: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

Let us know if it works out.

Upvotes: 1

Related Questions