[GitHub] [cordova-plugin-screen-orientation] alfredarcifa opened a new issue #78: Lock media query on change orientation

[GitBox <gi...@apache.org>]

alfredarcifa opened a new issue #78:
URL: https://github.com/apache/cordova-plugin-screen-orientation/issues/78


   # Bug Report
   
   ## Problem
   
   ### What is expected to happen?
   On change orientation from landscape to portrait. The initial state is PORTRAIT
   
   
   ### What does actually happen?
   When I rotate my device from LANDSCAPE to PORTRAIT my media query doesn't work!
   The issue is that I see in chrome inspector the media query for LANDSCAPE instead of PORTRAIT. That's wrong!
   There is another strange behavior.
   If I close Web Inspector media queries are OK! Like a rendering problem of the entire app.
   
   
   ## Information
   In in spector I see this:
   
   @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
   :root {
     --breakpoint-active: 768;
   }
   
   @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)
   :root {
     --breakpoint-active: 768;
   }
   :root {
     --breakpoint-active: 375;
   }
   
   
   
   ### Command or Code
   My media query: 
   `$breakpoint-mobile: 375;`
   `$breakpoint-tablet: 768;`
   `$tabletRetina : "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2)";`
   `$tablet : "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)";`
   
   `:root {`
     `--breakpoint-active: #{$breakpoint-mobile};`
   `}`
   
   `@media #{$tabletRetina} {`
     `:root {`
       `--breakpoint-active: #{$breakpoint-tablet};`
     `}`
   `}`
   
   `@media #{$tablet} {`
     `:root {`
       `--breakpoint-active: #{$breakpoint-tablet};`
     `}`
   `}`
   
   
   
   ### Environment, Platform, Device
   Env.
   `"@angular/core": "5.2.11",`
   `"ionic-angular": "^3.9.6",`
   `"@ionic-native/screen-orientation": "^4.12.2",`
   
   Platform
   Android 10
   
   Device
   Samusung Galaxy A40
   
   
   
   
   ### Version information
   <!-- 
   What are relevant versions you are using?
   For example:
   Cordova: Cordova CLI, Cordova Platforms, Cordova Plugins 
   Other Frameworks: Ionic Framework and CLI version
   Operating System, Android Studio, Xcode etc.
   -->
   
   
   
   ## Checklist
   <!-- Please check the boxes by putting an x in the [ ] like so: [x] -->
   
   - [x] I searched for existing GitHub issues
   - [x] I updated all Cordova tooling to most recent version
   - [x] I included all the necessary information above
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org