'Media query for galaxy Galaxy fold

I want to change the font size of my page when it is viewed on galaxy fold device. But I am not sure how to deal with this using media queries. Can anyone help me and give me an idea about how can I remedy this ?

cssresponsive


Solution 1:[1]

If you need media query for folded version of device you can use 320px screen width.
There is no other device with such screen width from popular ones so you can simply use this media query. Alternatively you can use JS module from npm to detect device and change font size dynamically

@media(max-width: 320px){ 
  font-size: 10px
}

Solution 2:[2]

if you use just @media(max-width: 320px) , the code will be effect on others devices example : (Galaxy S8 Galaxy s7 ... ), use this css to fix the problem :

@media (min-width: 280px) and (max-width: 320px) { .your-class { font-size: 10px; } }

Solution 3:[3]

As of right now, there is a draft for a device posture API. Formerly it was the 'Screen Fold' API that would allow media queries of the type: @media (device-posture: laptop) and (spanning: single-fold-horizontal){}

This would generally solve the issue of responsiveness for folding screens.

Sadly this isn't implemented yet, and alternatives like using a navigator.useragent property are unreliable and not recommended.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gîrbu Nicolae
Solution 2 Younes Ouma
Solution 3 JW Geertsma

Related Questions