html - mobile trouble with viewport settings -

i'm developing mobile site first time , i'm trying create responsive design.

so far i'm having lot of trouble viewstate settings. on android on iphone.

i'm using these settings:

and i'm using in css (just sure): @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; }

it works perfect of time on iphone. when change landscape , normal, resolution of page gets smaller. , stays same (as should).

on android phone works both in landscape , normal modes. here problem is, when refresh page, seems mobile doesn't read viewport settings @ all. looks normal webpage isn't optimized mobile.

anyone have idea i'm doing wrong here?

edit

i tried add meta viewport tags (i don't know why code doesn't show in post, doesn't work either).

you start simplifying , rechecking code.

in head of page make sure have

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

if there additional viewport tags, remove them now.

for media queries in css use

@media (max-width: 767px){     /* adjust viewport width req'd */  .selector{ ... }  }   

and remove the other @ tags you've used (eg @-ms-viewport)

good luck!