0

Всем привет. У меня адаптивный сайт и там менюшка. На компе при наведении на пункт должно появляться подменю, а вот на смарте при нажатии меню должно выезжать. Все бы просто, но как сделать с этими телефонами.

$(function() {
    $('#nav').click(function(){
        console.log("Функция для телефона, планшета. Ширина 675px и меньше");
    });
    $('#nav').hover(function(){
        console.log("Функция для компьютера. Ширина экрана больше 675px");
    });

});

Вспомнив, как смартфоны обрабатывают Hover, я решил не заморачиваться по этому поводу и оставил как есть :) Всем спасибо!

3 ответа 3

4

Нужно проверять не на ширину, а на поддержу св-в. Touch событий, например.

var isTouch = document.ontouchstart ? true : false;

А дальше вешать событий в зависимости от поддержки. Хотя бы так:

if (isTouch) {
    $('#nav').click(function(){
            console.log("Функция для телефона, планшета.");
        });
} else {
     $('#nav').hover(function(){
            console.log("Функция для компьютера.");
        });        
}
1
  • Самый годный вариант, ведь на компе мы можем сделать маленькое окошечко, тогда это будет выглядеть не совсем хорошо. 31 янв 2013 в 10:38
2

Самое правильное - это разделять приложение для пк и для мобильных устройств.

Ну а так, по вашему запросу нужно просто проверять ширину экрана:

$(document).width();
2
  • Не, так я знаю, как ширину получить. Было бы хорошо, если бы вы показали, как то, что обрабатывает клик работало до 675, а то что ховер - от 675
    – acidernt
    30 янв 2013 в 12:47
  • Самое простое, это наверно вот так: var $docWidth = $(document).width(); // авось где-нибудь пригодится if($docWidth > 500) { var $EventType = 'hover'; } else { var $EventType = 'click'; } $('#nav').on($EventType, function(){ console.log("наша функция"); });
    – lampa
    30 янв 2013 в 12:53
2

Я сам делал так:

window.onload = function () {
   window._ScWidth = document.documentElement.clientWidth;
   window._ScHeight = document.documentElement.clientHeight;
};
window.onresize = function () {
    _ScWidth = document.documentElement.clientWidth;
    _ScHeight = document.documentElement.clientHeight;        
};

и у вас в _ScWidth будет хранится ширина а в _ScHeight - высота доступной странице области экрана всё время обновляющаяся...

3
  • А как мы можем на мобильниках изменять ширину браузера? Вы вопрос то читали?
    – lampa
    30 янв 2013 в 15:40
  • >А как мы можем на мобильниках изменять ширину браузера? Вы вопрос то читали? @lampa - перевернув экран - изменим ширину/высоту, на Android 4.0.4 открыв несколько окон и изменяя размер окна браузера - изменим ширину/высоту. Подобный вопрос уже задавался и мой ответ был как раз тем, что нужно :)
    – Rules
    30 янв 2013 в 15:44
  • @Rules хотя да, неподумал :) НО автору всё равно не то нужно.
    – lampa
    30 янв 2013 в 15:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.