Add media query only to specific device ipad pro

Question

I want to add media query to specific device ipad pro of size 1366*1024 height width and height.How do i add media query to to that size targeting only that width and height.Not less than 1366 or greater than 1366 !!!

Please add codes of what you have tried. – frnt Jun 19 '17 at 06:25 — frnt, Jun 19 '17 at 06:25

score 2 · Accepted Answer · answered Jun 19 '17 at 06:30

2

Copy pasted from here

@media (min-height: 1024px) and (min-width: 1366px) {
    /* CSS stuff */
}

Don't forget <meta name="viewport" content="width=device-width, initial-scale=1.0"> meta tag on header too.

answered Jun 19 '17 at 06:30

Kaung Myat Lwin

1,049
1
9
23

`@media (min-height: 1024px) and (min-width: 1366px) and (max-height: 1024px) { /* CSS stuff */ }` Taken from - https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Logical_operators Use the logical operators to your craft. – Kaung Myat Lwin Jun 19 '17 at 07:31

score 0 · Answer 2 · answered Jun 19 '17 at 06:27

0

@media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 1366px) { /* STYLES GO HERE */}

Reference link

answered Jun 19 '17 at 06:27

Dhaval Panchal

648
6
26

score 0 · Answer 3 · answered Jun 20 '17 at 09:23

    @media only screen 
      and (min-device-width: 1024px) 
      and (max-device-width: 1366px) 
      and (-webkit-min-device-pixel-ratio: 1.5) {
  //code
    }

You can also specify if you want to set over portrait or landscape:

    /* Portrait */
    @media only screen 
      and (min-device-width: 1024px) 
      and (max-device-width: 1366px) 
      and (orientation: portrait) 
      and (-webkit-min-device-pixel-ratio: 1.5) {
  //code
    }

/* Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
//code
}

Add media query only to specific device ipad pro

3 Answers3