Responsive Web Design for Screen and Mobile Devices

HTML & CSS
1

Hi,

I recently started to read the book called “Responsive Web Design” and I like the techniques used by the author but for some reason what I do doesn’t work on the iPhone, ok let me rephrase this it works but not like it should.

This is what I’m doing…
I have a simple html page and an external style sheet where I’m using @media queries to resize the content something like this…

…
/*SCREEN */
@media screen and (max-width:800px) {
#page-wrap {
width:400px;
background-color:blue;
}

}

/MOBILE/
@media only screen and (max-device-width:480px) {
#page-wrap {
width:400px;
background-color:green;
margin:10px auto;
}

}

the code above does work, it actually resizes the page-wrap but when viewed on the iPhone it looks small, in other words it doesn’t fill the whole screen (no problems when viewed on a computer).

Any idea what am I doing wrong? Why it doesn’t actually fill the whole screen on the iPhone?

I know I could use the viewport meta tag but I want to use @media queries if possible.

Here is the link to the testing page, try to resize your window and you will see it works on a computer but not on mobiles.
http://tu-design.com/testing/iphone-testing/

Thanks a lot.

2

Probably because the actual iPhone pixels are much more that 400px. Try width: 100% instead.

3

Thanks for your reply!

I changed the width to use percentages and tried different percentage (100%, 90%, 33.333%) and the page changes to the percentage specified, with 100% it basically renders the page at 980px which I believe is the iPhone’s default, when use other percentage like 33% it basically leaves white spaces on the sides it doesn’t zoom to take the whole space it uses 33% of the 980px.

Current Code:

/iPHONE/
@media
only screen and (max-device-width: 480px) {
#page-wrap {
width:33%;
background-color:green;
margin:10px auto;
}

}

It looks like it recognizes the iPhone’s screen size and changes accordingly but it doesn’t fill the whole screen, which defeats the purpose of having different widths.

I’m a little confused.

Have someone from here have done this before, if yes, can you show me your techniques?

Thanks a lot!

4

Add

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

to the head of your page.

5

The only thing i see wrong is you have no META tag that sets the default viewport for mobile devices, see what happens when you add the following to the <head> tags.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Off Topic:

Dang it, got beat to it :slight_smile:

6

Barely. Great minds think alike :smiley:

7

I’m not really sure what you are asking for.

8

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

Awesome It worked! Thank you all VERY much!

I’m not really sure what you are asking for.

I meant responsive web design, sorry about the confusion.

Thank you all