Viewport Questions

[simonmlewis]

Hi

We are trying to make a site more responsive to browser widths, rather than taking users to subdomains for smartphones.

We do have issues where our pages are at 950px, so we need to be using viewport, but having never used it before, I am at the learning stage! But am 100% confident that once I crack it, it's going to develop A LOT of work for me, so I'm all ears.

I've set the CSS to show different layouts based on browser size, but on devices like iPad, you have 768px on portrait, so I need to do some kind of zoom, and I understand @viewport does this.

So how does it work? I'm sure I don't zoom 'down' my page to be 768px all the time, so it must zoom it down to a minimum level, before it switches to the 'mobile' format.

Code: Select all

<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=768">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

These are the codes I have found, but not sure how it all works.

So for example, on my iPad in Landscape, in theory it displays it at normal size (950px).
But turn it Portrait, it and zooms 'out'. But how?

Many thanks

[Celauran]

I've set the CSS to show different layouts based on browser size

How are you achieving this? Media queries?

[simonmlewis]

Yes.
@media

Set one for iphone down to about 760px, and then one for 760+.

But on ipad, while I could say "768px" use the mobile version, it would be nicer if it zoomed out to show the full scale version.

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div
{
width: 950px;
background-color: #cccccc;
margin-left: auto;
margin-right: auto;
}
</style>
<div>hello</div>

Even this goes outside the browser width in portrait on 768 ipad, so I am doing something wrong here.

I thought the viewport somehow 'condenses'.

[Celauran]

Well, OK, that shows your default view. Where's the media query, though? You obviously don't want width 950px if the viewport is 768px.

[Celauran]

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div
{
width: 950px;
background-color: #cccccc;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 768px) {
    div {
        width: 94%;
    }
}
</style>
<div>hello</div>

[simonmlewis]

Correct.

Code: Select all

@media all and (min-width: 500px) and (max-width: 3000px) 
{
...
}

But I was under the impression that if viewport is 768, then it just reduces the "appearance/zoom" of the 950 width layout?

I have two DIVs side by size, one at 400 and one at 450. So they need to stay like that for everything else to fit. I don't want to be messy around with widths of divs for different sizes.

I want to use the full scale for normal browser down to 760 (or 500 in my example above), and the mobile version for below that.

[simonmlewis]

So if I did this:

Code: Select all

@media all and (min-width: 768px) and (max-width: 3000px) 
{
.viewport
{
width: 100%;
}

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class='viewport'>
content with all sorts of sized divs in it
</div>

It should work? Because it isn't.

I have one DIV that goes full screen width - then inside that a 950px wide DIV that contains the top menu.

Outside those DIVs is a second one, where is is 950px wide, with an auto margin each side, and content inside it, with float:left/right DIVs for content, all wtih size settings.

What do I need to surround it all in, to make sure it all sits in one DIV, and fits the screen down to 768px?

[simonmlewis]

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div
{
width: 950px;
background-color: #cccccc;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 768px) {
    div {
        width: 100%;
    }
    
        .big {
        width: 950px;
        border: 1px solid #000000;
        
    }
}
</style>
<div>hello

<div class='big'>khkjhjkh</div>
</div>

This doesn't work for the bordered DIV either.
I hope I don't have to go thru dozens and dozens of DIVs. Reading about it, it sounded to me like this viewport zooms it out, so it just kind of shrinks it. But they way you are describing it, you have to manually go through each DIV as well?

[simonmlewis]

I thought the viewport worked without the issues of the DIV widths.
So even if you have an image that is 2000px wide, the viewport set to initialscale=1, it would 'fit' it into the screen size. Same for DIVs that are larger than 768px.

[simonmlewis]

Code: Select all

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div
{
width: 950px;
background-color: #cccccc;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 768px) {
@viewport { width: device-width; scale: 1;}
}
</style>
<body>
<div>hello</div>

<img src="/DSCF2676.JPG" />
</body>
</html>

The image here is about 3000px wide. It goes completely off the screen on 768.

[simonmlewis]

Does the Viewport not "override" the sizing, and just scale whatever is on the page, to fit the screen?

[simonmlewis]

Code: Select all

<meta name="viewport" content="width=device-width; initial-scale=1.0;"> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=1024">

If I put this at the top, it works on iPad in both orientations, and on desktop at full screen.
But on iphone it also shows the full version.

If I take out the last line "1024", then the iphone shows the "phone" version, but the ipad doesn't work properly in Portrait.

Do you have to query the width in PHP or something to say "if screen width is a, then viewport is a, if width is <, then viewport is b, and so on?".

I don't believe you have to setup a CSS @media for three different sizes, since viewport does seem to zoom it for you.

[simonmlewis]

Code: Select all

<Script>
if($.mobile.media("screen and (min-width: 320px)")) {
    // Check for iPhone4 Retina Display
    if($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
        $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
    }
}
</script>

This makes the ipad work perfectly.
But also triggers it for the iphone, probably because of 320px in that script.
But if I set that to 768, it still forces the iphone screen to be the full version and not the smaller one.