Can someone help me out here - doesn't matter how much I read about Media Queries I still can't get my head around what to use in my stylesheets - especially the widths. I want my site layout to change according to the screen width using max and min dimensions set in the stylesheet - but maybe I've got the dimensions for iPad incorrect - I thought that in landscape mode it was 1024px and so would use my default stylesheet - it does but for some reason the site doesn't fit on screen!!!

 

I'm developing a site that is 960px wide - so I have a default stylesheet for this and I've gone through it and turned all the necessary px values to percentages. I've then created a stylesheet for 768px views (e.g. iPad in portrait mode) and will get round to doing a couple more for iPhone portrait and landscape modes. The client is keen for the site to work on iPad and iPhones and so I'm tackling these first.

 

When I view the test page on the iPad - in landscape mode - it loads the default stylesheet, but the site doesn't fit on the screen and I have to scroll left and right to see it all, or pinch it to get it to fit on screen - I thought that a 960px layout would be OK for iPad landscpape mode. What am I doing wrong? I've got this in my head tag:

 

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

 

Is that right?

 

When I turn the iPad to portrait the 768px stylesheet loads OK - I know this as I've changed the background colour on the body tag - but for some reason a white gap appears to the right of the design - this doesn't happen if I resize the page in the desktop browser. Does anyone know why this is happening?

 

Test page is here

 

this is the media query I have in my 768 stylesheet:

 

@media only screen
and (min-width : 768px)
and (max-width : 1023px) { ... }

 

but I'm not sure if this is correct as in portrait the iPad is 768px - so not sure why I'd want maximum width set to 1023px.

 

someone help me please - I'm really confused....

That block says that as long as the width is 768px or greater (ie, iPad portrait) but under 1024px (iPad landscape), use this stylesheet.

That block says that as long as the width is 768px or greater (ie, iPad portrait) but under 1024px (iPad landscape), use this stylesheet.

 

So why then when I turn the iPad to landscape does it load the default stylesheet and the site doesn't fit on the screen?

Basically I need it to work like this...

 

- desktop browsers with a wdith bigger than 768px and up + iPad landscape (if that fits into that category) to use default stylesheet.

- anything that is between 481 and 768 to use the 768 stylesheet - this would target iPad in portrait mode

- anything that is between 321 and 480 to use a 480 stylesheet - this would target the iPhone in landscpae mode

- anything below 320 would target the iPhone in portrait mode.

 

How do I set the media queries for this?

 

I don't want to target specific devices using "max-device-width" and "min-device-width" - I'd prefer to just use 'min-width' and 'max-width' and then the site will still load OK on desktop browsers if the browser to shrunk down to a small size.

Edited January 30, 201214 yr by Eskymo

I feel that I should have to include a media query in my default style sheet that says something like:

 

@media screen and (min-width: 769px) and (max-width: 2000px) { ... }

 

not sure what I would set the maximum width to be though.

 

and then in my 768 stylesheet say:

 

@media screen and (min-width: 481px) and (max-width: 768px) { ... }

 

can anyone help me with this?

Edited January 30, 201214 yr by Eskymo

Just read this article and I don't understand why they would use this media query:

 

<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="http://example.com/iPad.css" />

 

because surely the iPad in portrait mode and landscape mode should offer a different view of the site?? This is what I've seen in so many tutorials online and why I'm so confused - it doesn't make sense to me at all as iPad in portrait mode should use style targeted for 768px wide and not upto 1024px as that's the height of the screen in portrait mode.

 

Anyway - feel like I'm talking to myself here - so off to bash my head against a brick wall again and try a few other things out....

If I take the media queries out of the stylesheets and use this in my index.html file instead:

 

<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 769px)" />
<!-- 768 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 481px) and (max-width: 768px)" />
<!-- 480 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 321px) and (max-width: 480px)" />

 

It doesn't work - for some reason the background colour changes when viewing in portrait mode on the iPad but the rest of the styles don't load and I get an unstyled page. Don't know what I'm doing wrong here at all.

I've now changed this to:

 

<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="ps-default.css" />

<!-- For Desktop Browsers -->
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 769px) and (max-width: 1024px)" />

<!-- 768 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (max-width: 768px) and (orientation:portrait)" />
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 481px) and (max-width: 767px) and (orientation:landscape)" />

<!-- 480 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (max-width: 480px) and (orientation:landscape)" />

 

But still can't get the site to display properly in landscape mode on the iPad - it still uses the default stylesheet, but doesn't fit on the screen. I think maybe my viewport info must be wrong even though I've checked this a million times with loads of different online tutorials...

 

- anyone???????

Edited January 30, 201214 yr by Eskymo

Man this will help you understand.

http://www.thismanslife.co.uk/projects/lab/responsiveillustration/

Lovely animated thing there - but I don't see how that helps me with the maths to be honest...

Well, if you look at the source you will see the media queries he is using for iPhone portrait/landscape. iPad portrait/landscape, a normal laptop resolution, and then a iMac 27" (massive screen) resolution.

 

Just copy and paste the media queries you need, look at the measurements he's using for each.

It's not about maths, it's just knowing the different resolutions for different devices.

oh I see - sorry thicko me - forgot to look at source code - thought you were just trying to illustrate the changing screen widths. However having done so and changed my media queries to the following as suggested:

 

<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="ps-default.css" />

<!-- For Desktop Browsers -->
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (max-width: 1024px)" />

<!-- 768 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (max-width: 768px)" />

<!-- 480 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (max-width: 480px)" />

 

it doesn't work the way I want it to as between a width of 768px and 1024px and between the width of 480px and 768px you get horizontal scroll and for some reason the 480 stylesheet doesn't load at all. test it for yourself here.

It's working just fine.

Reason you get the horizontal scrolling is because you are using a fixed width (px)

That's why when most people are doing design for small screens, when it gets below a certain width, (usually less than the 600 mark) they change to liquid design (using %).

it also doesn't help me with the iPad landscape mode using the default stylesheet and having to scroll to see the whole page rather than it fitting on the screen.

I can't get the 480px stylesheet to load at all...

that's why I wanted to use min-width and max-widths in my media queries... to avoid the scrollbar situation...

Did you add the following code in your <head> tag?

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

 

?

I've got this in my head...

 

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

your code fixes the iPad landscape display problem but as you've included the bit about user-scalable=no it means users can't zoom in on details etc of the site if they want to so I'd want to take that out - I've just copied and pasted my line of code from several tutorials I've seen online that suggest this is the best to use.

 

--edit--

I took out the bit about user-scalable and still couldn't zoom in on bits, so have had to take out the entire line and revert back to what I had originally, but then I'm back to square one...

Edited January 30, 201214 yr by Eskymo

but if you are optmising your site for iPad, will the users need to zoom in?

I guess it depends on how much of a layout/design change is happening...

Well I don't want to disable the pinch to zoom feature - people might want to zoom in on text to make it easier to copy sections etc or to see things in more detail.

Well I don't want to disable the pinch to zoom feature - people might want to zoom in on text to make it easier to copy sections etc or to see things in more detail.

 

Yeah, you need to keep this in tact. What one person considers 'optimized' won't be the same for another, so having zoom is good way to make the experience better for those outliers.

 

Not to mention half the time I'm on a site on the iPad (even when it's responsive) I find myself zooming in on various images with fine details.

I think it depends on how it is designed.

 

But anyway, the media queries should still work after removing it.

So I'm stuck bascially - if I use:

 

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

 

iPad in landscape loads the 768 stylesheet and the page is zoomed so the logo and images look pixelated.

I thought this might work - but nope the landscape view zooms in on the site....

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

I really don't understand how I can fix this problem and until it's fixed I can't really progress with the project.

edit

Edited January 30, 201214 yr by oakleaves

Does anyone else have the iPad landscape quirk happen on their sites? I think it must be a bug. The first time the site loads in landscape mode it loads correctly and then I switch to portrait and the 768 styleshhet loads and then switching back to landscape and the the default css file loads again but this time the page is scaled up and you have to pinch-zoom to get it all to display - from then on it only loads the scaled up view.

 

Am I the only one who experiences this issue?

all of these sites (which I found on http://www.mediaqueri.es) have the same problem - they load in landscape mode just find but then if you switch to portrait mode and then back to landscape mode the site it scaled up - maybe I don't need to worry about it as it's seems quite a common issue...

 

http://www.tracyworld.co.uk

http://www.smaxshingmagazine.com

http://foundation.zurb.com

http://themeloom.com

 

and the sites I've viewed from mediaqueri.es that don't have the issue have removed the ability to pinch-zoom. I think there lies my answer. Shame that it happens though.

Edited January 30, 201214 yr by Eskymo