Что вы используете для тестирования портативных CSS на вашем сайте? - PullRequest
11 голосов
/ 03 ноября 2008

Я добавил поддержку css для handheld на свой веб-сайт, но не смог найти хороший инструмент для тестирования.

Я пытался использовать плагин webdeveloper для Firefox, но он не работает для меня. Может быть, это потому, что все мои CSS находятся в HTML, а не отдельный файл CSS.

Существуют ли какие-либо другие инструменты тестирования, помимо выхода и покупки портативного устройства?

Ответы [ 6 ]

8 голосов
/ 03 ноября 2008

После небольшой охоты я нашел то, что искал, спасибо за ведущие ребята.

Opera отобразит handheld css, если вы выберете «Маленький экран» в меню «Вид».

6 голосов
/ 15 июня 2009

Я не уверен, если это хорошая идея, чтобы воскресить старый вопрос, но я надеюсь, что кто-то найдет его:)

Существует простой способ тестирования портативных CSS с помощью медиа-запросов :

    @media handheld, screen and (max-width: 500px) { /* your css */ }

После этого вы можете протестировать браузеры, реализующие медиазапросы, изменив размер окна до 500px.

3 голосов
/ 03 ноября 2008

Если у вас есть Visual Studio, должны быть эмуляторы устройств, которые позволяют вам тестировать мобильный IE, или они могут быть найдены отдельно на сайте Microsoft. Вот некоторые для WM 5 . Для тестирования этого браузера доступен OpenWave симулятор . Симуляторы Blackberry также доступны для тестирования браузера Blackberry. Вы можете (вроде) протестировать поддержку iPhone с Safari, хотя вы не можете проверить метатег viewport. Здесь есть симулятор Opera Mini .

Кроме того, вытащите CSS из своего HTML:)

1 голос
/ 14 июня 2011

Я обнаружил, что переключение типов носителей в среде разработки работает лучше всего для меня.

Например, если вы тестируете «handheld» css, просто добавьте медиа-тип «screen» к медиа-атрибуту и закомментируйте ваш CSS по умолчанию.

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

<!-- <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> -->
<link rel="stylesheet" type="text/css" media="screen,handheld" href="handheld.css" />
0 голосов
/ 16 июня 2011

Большинство смартфонов, таких как iPhone и некоторые устройства Android, не распознают handheld.css. Они взяли mediatype="screen", поэтому вам нужно включить этот короткий фрагмент JavaScript .

0 голосов
/ 03 ноября 2008

Для тестирования iPhone вы можете получить iPhone SDK здесь Но вам нужен компьютер с операционной системой OS X / Apple, чтобы он работал официально.

Не официально / хаки:

  • Существуют способы запустить OS X на стандартном оборудовании ПК, например здесь .
  • Или запустите SDK в Linux / vmware, описанном здесь .

Счастливого взлома!

Huibert Gill

...