Блог

Я хочу установить разные медиа-запросы для экранов шириной 1024 пикселей в зависимости от того, является ли это экраном ноутбука или экраном iPad.

Например, если кто-то просматривает мой сайт на ноутбуке (ширина: 1024px), он должен увидеть изображение, а если он просматривает его с iPad (ширина: 1024px), изображение должно быть скрыто (отображение: отсутствует).

Вы, вероятно, имеете в виду iPad Pro, ширина которого равна 1024px .

Вы можете определить, является ли устройство iPad или ноутбуком, используя медиа-запросы, проверяя высоту устройства: высота iPad Pro 1366px — это то, что, я думаю, выше высоты любого ноутбука, поэтому CSS будет выглядеть так:

 @media screen and (min-width: 1024px) and (min-height: 1320px) {
    /* iPad Pro */
}

@media screen and (min-width: 1024px) and (max-height: 1310px) {
    /* Laptop */
}
  

Если ширина экранов одинакового размера, CSS, я думаю, не может отличить их друг от друга.

Вы можете использовать JavaScript. platform Свойство из navigator объекта возвращает строку с платформой, на которой используется браузер. (например, MacIntel, Win32) (Использование: platform.navigator )

Для отключения и включения таблицы стилей это может сработать для вас: http://www.codechewing.com/library/how-to-disable-or-enable-a-stylesheet-in-javascript /

для медиа-запросов, специфичных для ipad, используйте приведенный ниже код,

если вы хотите скрыть изображение на ipad шириной 1024 пикселя, т.Е. в ландшафтном режиме, вы можете использовать класс «hide-me-landscape»

если вы хотите скрыть изображение на ipad в альбомном и портретном режимах, используйте класс «скрыть меня»

если вы хотите скрыть изображение в портретном режиме, используйте класс «скрыть-меня-портрет»

смотрите приведенный ниже код для примера

 /* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .hide-me{
        display: none;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .hide-me-portrait{
        display: none;
    }

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .hide-me-landscape{
        display: none;
    }
}
  

вы можете узнать больше об этом здесь

вы также можете использовать modernizr, чтобы определить, использует ли пользователь устройство с сенсорным экраном или нет, и соответствующим образом применить свой css

надеюсь, это поможет 🙂