2

Some reasons, I require to keep the same style as portrait to landscape too. How to achieve that using css3 media query?

Because there is some of functionality disabled for touch pads.

I tried but it still shows the desktop view

@media screen and (max-device-width:1024px){}
Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
3gwebtrain
  • 14,640
  • 25
  • 121
  • 247
  • 1
    Have you checked [here](https://stackoverflow.com/questions/26861189/how-to-set-portrait-and-landscape-media-queries-in-css)? – Carl Binalla Nov 16 '17 at 09:09
  • might be relevant: https://stackoverflow.com/questions/26861189/how-to-set-portrait-and-landscape-media-queries-in-css – Andrew Adam Nov 16 '17 at 09:09
  • 1
    ah @Swellar has just commented the same! – Andrew Adam Nov 16 '17 at 09:10
  • Possible duplicate of [How to set portrait and landscape media queries in css?](https://stackoverflow.com/questions/26861189/how-to-set-portrait-and-landscape-media-queries-in-css) – Carl Binalla Nov 16 '17 at 09:11

1 Answers1

0

You might like to check this too. Below are the ios related ones.

   


/* iPads (portrait and landscape) ----------- */

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


/* iPads (landscape) ----------- */

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


/* iPads (portrait) ----------- */

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


/**********
iPad 3
**********/

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

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



/* iPhone 4 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}


/* iPhone 5 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}


/* iPhone 6 ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}


/* iPhone 6+ ----------- */

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}
Hash
  • 7,726
  • 9
  • 34
  • 53