2

В сайте на wordpress внутри функции используется в проверка wp_is_mobile(), которая проверяет мобильное ли это устройство. У меня есть задача разделить css стили для мобильных устройств включая айпады про с разрешением 1024 и нетбуки, начиная с 10ки, у которых тоже разрешение 1024. Как это правильно сделать? Вот такая запись обращается только к мобильным устройствам или нетбуки тоже затронет?

@media only screen and (max-device-width : 1024px) {
/* Styles */
}

3 ответа 3

3

Как это правильно сделать?

Определять user-agent и в зависимости от этого подключать нужный css-файл. wp_is_mobile() для этого не подойдет.

9
  • в смысле? wp_is_mobile() в php отлично справляется. я спрашиваю - можно ли стили разделить с помощью меда-запросов наподобие тех, что выше привел и если нет, то почему
    – Вася
    19 мая 2017 в 10:49
  • wp_is_mobile() не делает различий между разными моб. девайсами. Я так понял то нужно ж именно по разным выдать разный css. Или я не правильно понял?
    – SeVlad
    19 мая 2017 в 11:05
  • нее, забудьте про wp_is_mobile(). Вот передо мной столько css файл со стилями - мне нужно мобильным устройствам, размером 1024 пикселя(айпад про) присвоить стили, которые не затронут десктоп размером 1024 пикслеля. есть различные виды записей медиа запросов @media - вот я и интересуюсь можно ли ими разделить стили
    – Вася
    19 мая 2017 в 11:10
  • 1
    У @media не всё хорошо с определением устройств. С его помощью определяется размеры окна браузера. И это совсем не тоже самое, что определение устройства. Более того парадигме mobilefirst не для всего его можно/стоит использовать.
    – SeVlad
    19 мая 2017 в 11:26
  • 2
    Именно так, только user-agent в javascript. Ничего другого. 19 мая 2017 в 11:45
2

Можно попробовать использовать orientation. Например

media (min-width: 700px) and (orientation: landscape) { ... }
3
  • а при перевороте экрана все пофиксится?
    – Вася
    19 мая 2017 в 13:47
  • 1
    на поворот можно использовать либо те же стили, либо другие. В зависимости от ситуации. У нетбука нет такого свойства, поэтому стили будут работать только для мобильных устройств
    – Anon
    22 мая 2017 в 14:27
  • мне вот эта статья помогла htmlweb.ru/css/media_screen.php
    – Вася
    24 мая 2017 в 13:25
0

Мне помогла вот эта статья, а именно использование стилей

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {}

сразу после задания для всех устройств

@media (min-width: 1024px) and (orientation: landscape) {}

а через js вот так

var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) {
  document.getElementById("box").style = "background-color:green;";
}
#box {
  width: 100px;
  height: 100px;
  background-color: red;
}
<div id="box"></div>

фидл

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.