Умирает ли всплывающее окно CSS с сенсорными экранами? - PullRequest
Новая
       27

Умирает ли всплывающее окно CSS с сенсорными экранами?

2 голосов
/ 19 апреля 2011

Я разрабатываю сайт (портал для клиентов), который, вероятно, будет использоваться с мобильными / сенсорными устройствами в будущем. В прошлом я использовал такой код CSS: 

div.Info
{
    display: inline;
    position: relative;
    text-decoration: none;
}

div.Info span.InfoDetail
{
    display: none;
}

div.Info:hover span.InfoDetail
{
    padding: 3px;
    display: block;
    position: absolute;
    top: 1em; left: 1em;
    border: 3px inset Gray;
    background-color: White; color: #000;
    text-align: left;
    white-space: nowrap;
    z-index: 25;
}

для создания маленьких всплывающих окон CSS, которые отображаются при наведении мыши, и они, кажется, работают очень хорошо. Однако я осознаю, что это может работать, а может и не работать на сенсорных экранах, поэтому мне было интересно, каково было «правильное» поведение, так как, похоже, не было большой последовательности, которую я обнаружил в ограниченном количестве мобильных браузеров, которые я был в состоянии смотреть на. Я немного посмотрел, и кажется, что это событие при наведении может активироваться, если объект получает фокус, поэтому я создал некоторый тестовый код по адресу http://mad -halfling.webs.com / testcode.htm , который отображает небольшое всплывающее окно, если навести курсор мыши на текст «Наведите курсор мыши на детали» или на небольшое изображение со стрелкой вверх: -

  • на iOS (я нашел демонстрационный iPad в магазине, чтобы протестировать его), похоже, это не работает (я только попробовал текст, так как только что добавил изображение)
  • на MicroB на моем N900, нажав на текст и изображение, вы увидите всплывающее окно, хорошо
  • в Firefox (я полагаю, это Fennec) на моем N900 нажатие либо ничего не делает

Что вы думаете по этому поводу - кажется позорным, поскольку это такой полезный способ создания всплывающих окон без необходимости прибегать к javascript, но если это не сработает с сенсорными экранами в будущем, мне придется переосмыслить моя стратегия

Приветствия

MH

Ответы [ 2 ]

2 голосов
/ 22 апреля 2011

Основная проблема с наведением мыши, в том числе при использовании для настольных веб-сайтов, заключается в том, что нет индикации пользовательского интерфейса поведения.

Это не окончательный ответ, но я заметил, что в тех местах, где вы теперь используете «наведение мыши» на мобильном устройстве, вы можете использовать «длинное касание». Проблема в том, что ничто в пользовательском интерфейсе не указывает на такое поведение. (Чтобы быть честными соглашениями по пользовательскому интерфейсу, которые не имеют указаний, были в течение некоторого времени, как двойной щелчок).

Эмпирическое правило, вероятно, все же должно быть таково, что, как и при наведении курсора мыши, критическая функциональность не должна требовать их.

0 голосов
/ 22 апреля 2011

Почему бы не иметь изображение вопросительного знака в кружке (который, как представляется, является обычной идиомой) рядом с тем, для чего вы хотите всплывающее окно, и иметь функцию onhover и onclick для отображения вашей документации?

...