Media Queries CSS

Question

For some reason my media queries do not resize my site correctly when viewing from an iphone or mobile device, i get the tablet version of the site on an iphone. The media queries work fine for tablet and perfectly when shrinking a browser window.

Have I missed anything?

@media only screen and (min-width: 1024px) {
/*styling here*/
}

@media only screen and (max-width: 1023px) and (min-width: 740px) {
/*Tablet styling here*/
}

@media only screen and (max-width: 739px) and (min-width: 0px) {
/*Mobile styling here*/
}

Looks fine to me. You can try the LESS skeleton stylesheet: http://lessframework.com/ — approxiblue, Jul 19 '12 at 12:39
Make sure the mobile browser wants to be supplied with a mobile version of the site. If the user has chosen not to, the browser will use a higher screen width and parse the normal stylesheet. — Madara's Ghost, Jul 19 '12 at 12:41
Try to write first for small devices then for higher resolution & use meta viewport. Hope all these help you. — SVS, Jul 19 '12 at 12:46

score 0 · Answer 1 · answered Jul 19 '12 at 12:39

0

Check Out this, and let me know whether it is working or not

You need to specify device width.

answered Jul 19 '12 at 12:39

Pradip R.

450
1
14
31

[Another Related Source](http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/) – Pradip R. Jul 19 '12 at 12:49
Using device width doesn't seem to work maybe because i'm using a virtual tester called MITE? – davey Jul 19 '12 at 12:53

score 0 · Answer 2 · answered Jul 19 '12 at 12:43

0

I think you may need to specify it as 'min-device-width'.

@media only screen and (max-device-width: 739px) and (min-device-width: 0px) {
    /*Mobile styling here*/
}

answered Jul 19 '12 at 12:43

rpg3

52
1
7

Media Queries CSS

2 Answers2

Linked