Question 230474 in CSS Question posted in
Some basic documentation can be found here.

How to avoid overwriting of CSS media queries for iPad of different viewport sizes

I am trying to write CSS to adjust UI for iPad of different viewport sizes like for iPad Pro 11,12, and iPad Air. But styling is overwriting by the last media query.

@media only screen and (max-width: 768px) {//CSS}

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

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

@media only screen and (min-device-width: 820px) and (max-device-width: 1180px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2){ 
   //CSS
}

@media only screen and (min-device-width: 820px) and (max-device-width: 1180px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2){
  //CSS
}

@media only screen and (min-device-width: 834px) and (max-device-width: 1194px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2){
//CSS
 }

@media only screen and (min-device-width: 834px) and (max-device-width: 1194px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2){
  //CSS
}

I am expecting that media queries not overwrite and the styles are for which device should only apply for that device.
Note: In my case devices are iPad.

Tags:

2

Answers


  1. 0

    To reduce HTTP call, this can also be used inside you existing common CSS file:

    @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .ipad-portrait { color: red; } /* your css rules for ipad portrait */
    }

    @media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
    .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
    }

    Login or Signup to reply.
  2. 0

    Consider these two queries:

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

@media only screen and (min-device-width: 834px) and (max-device-width: 1194px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2){
  //CSS
}

    Now consider a window that is 1050px wide, portrait and -webkit-min-device-pixel-ratio: 2.

    • Does it meet the rule min-device-width: 1024px? Yes
    • Does it meet the rule max-device-width: 1366px? Yes
    • Does it meet the rule orientation: portrait? Yes
    • Does it meet the rule -webkit-min-device-pixel-ratio: 2? Yes
    • Does it meet the rule min-device-width: 834px? Yes
    • Does it meet the rule max-device-width: 1194px? Yes
    • Does it meet the rule orientation: portrait? Yes
    • Does it meet the rule -webkit-min-device-pixel-ratio: 2? Yes

    Both media queries match completely.

    The rules in both will be applied.

    Any conflicting rules will be handled by the normal cascade rules which includes, all else being equal, the order they appear in the CSS source code.

    With your current approach you need to do one or more of:

    • Take more care over the order the rules are applied in
    • Take more care over the conditions expressed in the media queries

    However, it would probably be better to stop trying to have ultra-device specific rules.

    A popular design philosophy is mobile first in which CSS is written for a narrow device and then selectively overridden with media queries as more room becomes available. Choose the widths of the media queries based on how much space is needed for the wider design, not what a particular device supports. Website designs tend to last longer than specific pieces of hardware!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search