0

This is driving me crazy. I designed this responsive website and it works perfect on computer, iPad and iPhone. But not on my android phone. It shows the iPad or the desktop version (both of them look similar so I'm not sure which one)

I'm using a seperate css for phones, and Im all confused with viewport device-width vs width and max-width vs width. I think I have jammed them up but finding it hard to find a solution. Can you guys please help me out and let me know what I'm doing wrong?

Also, usually a responsive site shrinks when you resize the browser window, but my site doesn't. Am I doing responsive wrong? Please help.

I tried <meta name="viewport" content="width=device-width, initial-scale=1"> too but no luck

1 Answer 1

2

Change your meta into this one, see if it works:

<meta name="viewport" content="width=device-width, initial-scale=1">
2
  • mate you have a syntax error in there. It should be max-width: 480px not max-device-width: 480px. And put width=device-width in meta viewport
    – Zendy
    Sep 13, 2012 at 1:26
  • thanks heaps. That fixed it. But the mobile site looks a little bigger than the screen on Android, any thoughts on that?
    – nasty
    Sep 13, 2012 at 1:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.