Секция CSS
Сначала создайте новый класс для суждения, а затем используйте медиа-запросы, чтобы назначить различные значения атрибуту Z-индекса этого класса. Этот класс используется только в качестве чтения JavaScript, поэтому его необходимо перемещать из окна экрана, чтобы зритель невидим, чтобы избежать неожиданных ситуаций.
В качестве демонстрации, следующий код устанавливает четыре состояния устройства: обычная версия для рабочего стола, версия для настольных компьютеров с небольшим экраном, версия планшета и мобильная версия.
/ * Состояние по умолчанию */. State-Indicator {позиция: абсолют; Верх: -999EM; Слева: -999EM; z-index: 1;}/ * маленький настольный компьютер */@media all и (max-width: 1200px) {.state-indicator {z-index: 2; }}/ * планшет */@media all и (max-width: 1024px) {.state-indicator {z-index: 3; }}/ * Мобильный телефон */@Media All и (Max-Width: 768px) {.state-indicator {z-index: 4; }}JavaScript Sudge
CSS уже на месте, поэтому вам необходимо использовать JavaScript для генерации временного объекта DOM, затем установить для него соответствующий класс, а затем прочитать значение Z-индекса этого объекта. Нативный метод написания выглядит следующим образом:
// Создать индикатор elementvar indicator indicator = документ. 10);} getDeviceState () Функция возвращает значение z-индекса. Чтобы улучшить читаемость, вы можете использовать функции переключения для стандартизации вывода: function getDevicestate () {switch (parseint (window.getComputedStyle (индикатор) .getPropertyValue ('z-Index'), 10)) {case 2: return 'small-desktop'; перерыв; Случай 3: вернуть «планшет»; перерыв; Случай 4: вернуть «телефон»; перерыв; по умолчанию: вернуть 'настольный компьютер'; перерыв; }}Таким образом, вы можете использовать следующий код для определения состояния устройства, а затем выполнить соответствующий код JavaScript:
if (getDeviceState () == 'tablet') {// код JavaScript, выполненный под планшетом}Если вы используете jQuery здесь, просто используйте следующий код:
$ (function () {$ ('body'). Append ('<div> </div>'); function getDeviceState () {switch (parseint ($ ('. State-indicator'). CSS ('z-index'), 10)) {случай 2: вернуть «малый-desktop»; case 3: return 'table' table '; 'Desktop';Сначала создайте, затем получите и, наконец, удалите этот узел. Конкретное устройство будет выводиться в вашей консоли. Нажмите здесь, чтобы просмотреть демонстрацию. Вы можете попытаться перетащить среднюю границу и нажать запуск.