2009-12-07 1 views
1

Простое получение css для мобильного веб-приложения (с использованием xhtml-basic/xhtml-basic11 dtd) и пыталось придумать надежный способ фильтрации для мобильных браузеров. Я взглянул на http://detectmobilebrowser.com, но фильтр, по-видимому, фильтруется на основе списка совпадений строк.Фильтрация мобильных браузеров при невозможности выполнить с помощью jQuery

Вот что я хотел бы сделать:

1 - В CSS, установите части страницы, чтобы скрыть от мобильных браузеров, чтобы не отображать

#hideMeFromMobiles{display:none;} 

2 - Вызов сценария с использованием надежная библиотека, которая в значительной степени наверняка потерпит неудачу в мобильных браузерах. Скрипт делает что-то вроде этого (псевдокод)

if browser.window.width >= 480px then { 
    $(#hideMeFromMobiles).addStyle(display:block;) 
    } 

Идея для сценария на провал неразрушающим мобильных браузеров и запустить успешно в настольных веб-браузеров.

Мой вопрос заключается в следующем:

Во-первых это будет работать? Есть ли какая-то причина, что это тупик, и я должен перейти к другому решению?

А во-вторых, может ли кто-то подтвердить правильный синтаксис jQuery?

Спасибо за вашу помощь, Dug

ответ

3

Вы должны быть в состоянии указать конкретную таблицу стилей только для мобильных телефонов, связав в специальном CSS, который будет загружаться только переносными устройствами, нормальный браузер будет игнорировать это:

<link href="/css/mobile.css" rel="stylesheet" type="text/css" media="handheld" /> 

в обычном CSS имеет

#hideMeFromMobiles{} 

И в мобильном CSS имеет

#hideMeFromMobiles{display:none;} 

Если вы связали мобильный css после обычного css, настройки мобильного css будут отменять обычные.

+0

Благодаря @Fungus, я был предупрежден об использовании атрибута media. По-видимому, это не так надежно, и неудачи несовместимы. Я пытаюсь думать о грубом, но надежном решении ... – Dug

+0

Хммм .. Я никогда не слышал, чтобы это было более ненадежным, чем любые другие веб-технологии. Но вот ты! Надо будет это посмотреть. ;) –

4

Прежде всего, мобильные браузеры могут лежать о ширине и масштабе или прокручивать.

Во-вторых, jQuery - довольно толстая библиотека для многих мобильных устройств. Он не работает на всех из них, и он очищает кеш некоторых из них. xui может быть лучшим выбором. Команда jQuery изучает возможность создания модульной версии библиотеки для мобильных устройств.

В-третьих, вам понадобятся некоторые цитаты вокруг этого спецификатора #hideMeFromMobiles.

В-четвертых, некоторые мобильные браузеры по умолчанию имеют JavaScript (я смотрю на вас, браузеры Blackberry). Вам понадобится разметка <noscript>.

проверял подводные камни мобильных броузеров. Вы должны начать с его mobile tests.

Наконец, некоторые мобильные браузеры великолепны, особенно новые на смартфонах, использующих WebKit. Я бы тестировал сайт на iPhone, Android, Storm и Pre перед тем, как навязать им мобильную страницу.

+0

Thanks @Nosredna :-) – Dug

1

Попробуйте http://www.iui-js.org/, который, как мне кажется, выглядит более чистым для меня.

+1

Добро пожаловать в Stack Overflow! Хотя предоставление вариантов может быть полезным, вы должны хотя бы попытаться ответить на исходный вопрос. См. Http://stackoverflow.com/questions/how-to-answer для получения информации. – GargantuChet

1

Если вы серьезно относитесь к мобильной разработке, вам следует рассмотреть возможность создания отдельных страниц для мобильных устройств.

Хотя #hideMeFromMobiles{display:none;} будет работать, все содержимое и изображения будут по-прежнему загружаться пользователями на мобильных устройствах, не говоря уже о других CSS и скриптах, запущенных на странице. Это значительно увеличит пропускную способность посетителя. Лучше обслуживать их на определенных мобильных страницах.

Что касается обнаружения, думаю, http://detectmobilebrowser.com - один из лучших методов. Не нужно изобретать велосипед. Как упоминалось в других ответах, ширина экрана может обмануть вас.