Responsive website - how to debug a non-responding responsive css?

Question

I'm working on a project that needs 4 different layouts:

• Desktop+Laptop;
• Tablet landscape;
• Tablet portrait;
• Mobile.

For the testing purposes I'm using Opera browser and its page zooming. And in Opera (as well as all the other browsers on my laptop) when I zoom the page in and out, the layout changes correctly. But when I open the same page with my smartphone and tablet, it just displays the Desktop layout. My project's temporary address is:

http://tiip.dit.rs/tiip2

Does anyone have any ideas what am I doing wrong?

Answer 1

In chrome if you open up the developer tools, there is a little cog in the bottom right corner. In the settings you can choose user agent, which will make chrome behave similar to different devices . hope this helps

Answer 2

I think this link may be more helpful to you

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

And for initially to your HTML

Add

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

Answer 3

Try to add the meta tag:

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

You can get some more information about this tag and why you need it by googleing "viewport meta tag"