Что вы используете для тестирования портативного CSS на своем веб-сайте?

StackOverflow https://stackoverflow.com/questions/259330

Вопрос

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

Я попробовал использовать плагин веб-разработчика для Firefox, но у меня он не работает.Возможно, это потому, что весь мой CSS находится в формате html, а не в отдельном файле CSS.

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

Это было полезно?

Решение

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

Opera отобразит ручной файл css, если вы выберете " Маленький экран " из меню Вид.

Другие советы

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

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

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

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

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

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

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

Например, если вы тестируете " портативное устройство " 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 вы можете получить iPhone SDK. здесьНо вам понадобится компьютер OS X / Apple, чтобы он работал официальным способом.

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

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

Удачного взлома!

Хьюберт Гилл

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top