Как установить различные медиа-запросы для ноутбуков 1024 пикселей и ширину IPad 1024 пикселей?

Question

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

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

Answer 1

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

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

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

Answer 2

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

если и хотят, чтобы скрыть IMG в IPad на 1024px шириной режиме т.е. альбомной и может использовать класс «скрыть меня-пейзаж»

если и хотят, чтобы скрыть IMG в IPad с ландшафтным и использовать портретный режим класса «выдвижным меня»

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

смотри ниже код для экс

/* 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; 
    } 
} 

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

вы также можете использовать modernizr для обнаружения ли пользователь использует устройство сенсорного экрана или нет, и применить CSS соответственно

надеюсь, что это помогает :)

Answer 3

здесь лучше E xample, чтобы создавать различные запросы в css?

@media only screen and (min-width: 480px) { 
 
    /* for mobile*/ 
 
    
 
} 
 

 
@media only screen and (min-width: 768px) { 
 
    /* for ipad or tablets*/ 
 

 
    
 
} 
 

 
@media only screen and (min-width: 1140px) { 
 
    
 
    /* for laptop..*/ 
 

 
}

Answer 4

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

Вы можете определить, является ли устройство iPad или ноутбуком, используя медиа-запросы, проверяя высоту устройства: высота iPad iPad 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 */ 
}