Jquery условие для мобил(или экранов меньше 500px), чтобы блокам задавались прописанные свойства?

Question

[Martyer]

Если экран меньше 500px, будь это iphone или любой телефон/ планшет, то к блокам применяются другие прописанные свойства, сталкивался ли кто с такой проблемой?

Comments

[Евгений Петров]

Что вы имеет ввиду под словом «экран» — screen или viewport?

Answer 1

[Mykhailo Kruts]

Вариант 1:

$(function(){
    if ($(window).width() < 500){
        // Подключаем стиль для мобильных
        $("head").append($("<link rel='stylesheet' href='css/styleMob.css' type='text/css' media='screen' />"));   
    }
    else{
        // Подключаем стиль для остальных
        $("head").append($("<link rel='stylesheet' href='css/style.css' type='text/css' media='screen' />"));
    }
});

Вариант 2:
Определять девайс через стороннюю js. Посмотреть пример можно тут:
ruseller.com/lessons.php?id=1896
А после этого уже подключать стили.

Comments

[Martyer]

Спасибо, сейчас испробую. А что за $("head") ?

[Mykhailo Kruts]

htmlbook.ru/html/head