медиа стиль для планшета

[webplus]

Здравствуйте!
Сверстал сайт, в браузере любом смотрится нормально, но в планшете блоки из за margin-ов переносятся вниз. Прописал для планшета медиа стиль:

Код: Выделить всё

@media (max-device-width: 1280px) {
    .phonebox{margin-left:23px}
    .mn{margin-left:0px;}
    .sendboxf{width:192px}
}
 

после этого запроса в планшете все хорошо, но а на компьютере где такое расширение как и у планшета медиа запрос тоже срабатывает, и получается что большие зазоры между блоками, но а на планшете все ок, зазоров нет!
Может как то можно прописать только медиа запрос только для планшета? или еще как то это решить

[S c]

"Как то", конечно можно, есть js либы, в которых есть функции типа isПланшет(). И для планшетов можно дополнительный класс добавить. Но это не решение. Многое зависит от браузера а не от самого устройства

[webplus]

Решил так проблему:
подключил device.min.js
и вписал:

Код: Выделить всё

if(device.windows()===false){
$('.phonebox').css({'margin-left':'23px'});
$('.mn').css({'margin-left':'0px'});
$('.sendboxf').css({'width':'192px'});

}  

[S c]

Зачем? лучше добавить класс в html или body тэг после такой же проверки (if windows() == false) а в стилях уже от родительского класса исходить

[webplus]

Зачем? лучше добавить класс в html или body тэг после такой же проверки (if windows() == false) а в стилях уже от родительского класса исходить

напишете пожалуйста какой css тег добавить в код яваскрипт? Как это будет выглядеть?

[S c]

во view

Код: Выделить всё

if(device.windows()===false){
    $('body').addClass('mobile');
}

в стилях

Код: Выделить всё

.mobile .phonebox {
    margin-left: 23px;
}

[webplus]

Спасибо! Тоже интересный подход!