PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Wed Dec 02, 2020 11:03 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 13 posts ] 
Author Message
 Post subject: Viewport Questions
PostPosted: Mon Sep 01, 2014 4:46 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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.

Syntax: [ Download ] [ Hide ]
<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

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
 Post subject: Re: Viewport Questions
PostPosted: Mon Sep 01, 2014 5:01 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada

_________________


Top
 Profile  
 
 Post subject: Re: Viewport Questions
PostPosted: Mon Sep 01, 2014 5:06 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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.

Syntax: [ Download ] [ Hide ]
<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'.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
 Post subject: Re: Viewport Questions
PostPosted: Mon Sep 01, 2014 5:15 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
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.

_________________


Top
 Profile  
 
 Post subject: Re: Viewport Questions
PostPosted: Mon Sep 01, 2014 5:16 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
Syntax: [ Download ] [ Hide ]
<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>

_________________


Top
 Profile  
 
 Post subject: Re: Viewport Questions
PostPosted: Mon Sep 01, 2014 5:18 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Correct.
Syntax: [ Download ] [ Hide ]
@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.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
 Post subject: Re: Viewport Questions
PostPosted: Mon Sep 01, 2014 5:32 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
So if I did this:
Syntax: [ Download ] [ Hide ]
@media all and (min-width: 768px) and (max-width: 3000px)
{
.viewport
{
width: 100%;
}


Syntax: [ Download ] [ Hide ]
<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?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
 Post subject: Re: Viewport Questions
PostPosted: Tue Sep 02, 2014 2:53 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Syntax: [ Download ] [ Hide ]
<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?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
 Post subject: Re: Viewport Questions
PostPosted: Tue Sep 02, 2014 4:00 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
 Post subject: Re: Viewport Questions
PostPosted: Tue Sep 02, 2014 4:56 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Syntax: [ Download ] [ Hide ]
<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.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
 Post subject: Re: Viewport Questions
PostPosted: Tue Sep 02, 2014 3:46 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Does the Viewport not "override" the sizing, and just scale whatever is on the page, to fit the screen?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
 Post subject: Re: Viewport Questions
PostPosted: Wed Sep 03, 2014 4:37 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Syntax: [ Download ] [ Hide ]
<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.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
 Post subject: Re: Viewport Questions
PostPosted: Wed Sep 03, 2014 7:25 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Syntax: [ Download ] [ Hide ]
<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.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 13 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 7 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group