Что вы используете для тестирования портативного CSS на своем веб-сайте?
Я добавляю поддержку css для портативный на свой веб-сайт, но не смог найти хороший инструмент для тестирования.
Я пробовал использовать плагин веб-разработчика для Firefox, но у меня он не работает. Может быть, это потому, что весь мой css находится в html, а не в отдельном файле css.
Существуют ли какие-либо другие инструменты для тестирования, помимо покупки портативного устройства?
Ответы 6
Если у вас есть Visual Studio, должны быть эмуляторы устройств, которые позволят вам тестировать мобильный IE, или их можно найти отдельно на сайте Microsoft. Вот некоторые для WM 5. Для тестирования этого браузера доступен Симулятор OpenWave. Симуляторы ежевики также доступны для тестирования браузера Blackberry. Вы можете (отчасти) протестировать поддержку iPhone с помощью Safari, хотя вы не можете проверить метатег области просмотра. Здесь есть Симулятор Opera Mini.
Кроме того, извлеките свой CSS из своего HTML :)
Вы также можете динамически обслуживать его со своего сервера. Попросите серверный процесс (php-скрипт, что угодно) обработать запрос customUser.css и написать его в зависимости от своих предпочтений. Таким образом, браузер все еще может кэшировать его.
Для тестирования iPhone вы можете получить iPhone SDK здесь Но вам нужен компьютер OS X / Apple, чтобы он работал официальным способом.
Не официальные / хаки:
- Есть способы запустить OS X на стандартном оборудовании ПК, таком как здесь.
- Или запустить SDK в Linux / vmware, описанном здесь.
Удачного взлома!
Хьюберт Гилл
Немного поохотавшись, я нашел то, что искал, спасибо за потенциальных клиентов.
Opera отобразит css портативный, если вы выберете «Маленький экран» в меню «Просмотр».
Вы также можете просто протестировать экранный css в IE6 в Windows, но я бы не рекомендовал это ...
С какой стати кто-то проголосует против этого, когда я НАШЕЛ то, что искал, называл меня запутанным.
Я не вижу опции «Маленький экран» в последней (10.53) версии Opera. Возможно, его убрали.
@John Опция переехала. Нажмите Shift + F11 или перейдите в раздел «Страница»> «Инструменты разработчика»> «Макет»> «Мобильный просмотр».
@mercator: Спасибо, но у меня это все еще не работает. Я вижу View -> Developer Tools, но не Layout под ним. А Shift + F11 ничего не делает.
@John: хммм, может, в таком случае тебе понадобится Меню отладки. Также смотрите здесь: opera.com/dragonfly
Не уверен, что воскресить старый вопрос - хорошая идея, но надеюсь, что кто-нибудь его найдет :)
Есть простой способ протестировать ручной CSS с помощью медиа-запросы:
@media handheld, screen and (max-width: 500px) { /* your css */ }
После этого вы можете протестировать браузеры, реализующие медиа-запросы, изменив размер окна до менее 500 пикселей.
Я обнаружил, что мне лучше всего подходит переключение типов мультимедиа в среде разработки.
Например, если вы тестируете «портативный» CSS, просто добавьте тип мультимедиа «экран» в медиа-атриб и закомментируйте свой CSS по умолчанию.
После завершения этого шага вы обычно хотите протестировать на реальном портативном устройстве.
<!-- <link rel = "stylesheet" type = "text/css" media = "screen" href = "screen.css" /> -->
<link rel = "stylesheet" type = "text/css" media = "screen,handheld" href = "handheld.css" />
Большинство смартфонов, таких как iPhone, и некоторые устройства Android не распознают handheld.css. Они взяли mediatype = "screen", поэтому вам нужно включить этот короткий фрагмент JavaScript.
Мой CSS встроен, поскольку он настраивается на основе предпочтений пользователей (они могут настраивать размер / цвета шрифта по умолчанию и т. д.). Думаю, мне следует выделить статичную часть. Это в моем списке дел.