Фильтрация мобильных браузеров по сбою при использовании jQuery

Question

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

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

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

#hideMeFromMobiles{display:none;}

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

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

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

Мой вопрос такой:

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

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

Спасибо за вашу помощь, Выкопанные

Answer 1

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

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

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

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

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

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

Answer 2

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

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

В обычном CSS есть

#hideMeFromMobiles{}

А в мобильном css есть

#hideMeFromMobiles{display:none;}

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

Answer 3

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

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

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

Answer 4

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