search

vitalets / react-native-extended-stylesheet

Extended StyleSheets for React Native
MIT License
2.93k stars 132 forks source link

Ambiguity about aspect-ratio media query - screen vs window area #146

Closed ragecryx closed 3 years ago

ragecryx commented 4 years ago

It should be clear as to which aspect ratio the library checks against. And if both can't be supported then the one supported probably needs to be the Screen area not the Window area as it currently is.

Steps to Reproduce

  1. Have a project using the library
  2. Make sure it has a media query like @media (aspect-ratio: 9/16)
  3. Run the project in an android device with 9/16 aspect ratio but with virtualized bottom 3 buttons
  4. The media query is not matched because it's based on window width and height

In my case with a Galaxy Nexus AVD at 720 x 1280 resolution the rule matches @media (aspect-ratio: 45/74) but not @media (aspect-ratio: 9/16) as I expected.

stale[bot] commented 3 years ago

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

dimgrav commented 3 years ago

Still open

ragecryx commented 3 years ago

After some thought it's good that the library means the available space because you can have split-screen apps for example and you may want to adapt the UI properly. So adding something like screen-aspect-ratio should be the best solution.

stale[bot] commented 3 years ago

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

vitalets commented 3 years ago

In my case with a Galaxy Nexus AVD at 720 x 1280 resolution the rule matches @media (aspect-ratio: 45/74) but not @media (aspect-ratio: 9/16) as I expected.

Can it be solved with min-aspect-ratio and max-aspect-ratio? Like this:

'@media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 45/74)': {
  ...
}

Sorry for late response.

stale[bot] commented 3 years ago

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.