Адаптивная вёрстка под мобильные

[Hobu4ek]

Здравствуйте

Столкнулся с проблемой адаптивной вёрстки. Телефон имеет ширину экрана 640px, высоту 1100px

Делаю в css такое условие:

@media only screen and (max-device-width: 670px) {

#navi-h {height:auto; width:500px; background:url(images/home-menu-bg.jpg) repeat; margin:0 auto;}
}

 

Подцепляется стиль, но отображается на экране намного меньше реальности, по ширине показывается меньше процентов на 30. В чём может быть причина?

 

 

ну и дабы не быть голословным

сайт f c d e c o r точка ru

[klierik]

имя домена можно писать по-человечески

[Great Rash]

Эту статью читали?

[da4ka]

viewport Вам нужен для адаптивного сайта. а так браузер это отображает как обычный сайт

Edited January 13, 2014 by da4ka

[AlexeiS]

Вы же сами прописываете ширину width:500px;...  а когда у вас браузер достигает ширины 640px, он "применяет" этот стиль. В итоге свободное место в 140px  Или проблема не в этом? Вы ставили для теста ширину в 100процентов?

[SelenIT]

Пара маленьких уточнений:

1) высота пятого айфона 1136 пикселей (экранных),

2) но в CSS-пикселях его размер считается равным 320•568 (один CSS-пиксель рисуется квадратиком 2•2 экранных, для четкости текста),

3) при этом сайт по умолчанию рисуется, как отображенный на экране шириной 980 пкс и затем отмасштабированный до 320. Это как раз можно изменить с помощью meta viewport.

Очень подробно тема раскрыта здесь: http://www.quirksmode.org/mobile/viewports2.html