Мобильный сайт

Доброго времени суток дорогие форумчане.

Начал писать к основному сайту его мобильную версию, но тут же столкнулся с проблемой.
В гугле эмулятор мобильника показывал все как надо http://i.imgur.com/Wm3WxQA.png, но зайдя с настоящего мобильника (320х480) я увидел такое http://i.imgur.com/vjv27L7.png.
Тобишь я столкнулся с несоответствием желаемого (написанным кодом) и действительного. Или это гугловский эмулятор меня дурит? Или я неправильно подхожу к созданию мобильного дизайна?

Код (PHP):

1. <div class='q'>
2.     <div class='w'>
3.         <div class='w1'></div>
4.         <div class='w2'></div>
5.         <div class='w3'></div>
6.     </div><div class='z'>text</div>
7. </div>
8.  
9. <style>
10. *{margin:0;}
11. .q{
12.     width:100%;
13.     height:70px;
14.     background:#264097;
15. }
16. .z{
17.     font-size:30px;
18.     color:#fff;
19.     font-family:Tahoma;
20.     padding:0 0 30px 0;
21.     display:inline-block;
22. }
23. .w{
24.     width:50px;
25.     height:70px;
26.     background:#999;
27.     display:inline-block;
28.     margin:0 15px -15px 0;
29. }
30. .w:active{
31.     background:#777;
32. }
33. .w1{
34.     width:25px;
35.     height:6px;
36.     background:#fff;
37.     margin:22px 0 0 0;
38. }
39. .w2{
40.     width:25px;
41.     height:6px;
42.     background:#fff;
43.     margin:4px 0 4px 0;
44. }
45. .w3{
46.     width:25px;
47.     height:6px;
48.     background:#fff;
49. }
50. </style>

 

Вот оно что.. Спасибо =)

 

Я указал такой мета тег

Код (PHP):

1. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

в надежде, что пользователь не сможет изменять масштаб, но он (пользователь) это спокойно делает. Как запретить сие действие?