0

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 ?

Anshuman Verma
  • 63
  • 1
  • 7
  • Does this answer your question? [how to identity device model with javascript](https://stackoverflow.com/questions/53294645/how-to-identity-device-model-with-javascript) – Justinas Jun 02 '21 at 06:33
  • @Justinas i think your comment would be very likely down-voted if there would be a downvote button :) 1.Question starts with "MediaQuery", 2.Tags contain CSS/Responsive, 3.Link you gave is a very bad idea and does not help at all. TLDR: https://www.webmobilefirst.com/en/devices/samsung-galaxy-fold/ – webdev-dan Jan 25 '22 at 02:53

3 Answers3

4

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
}
Gîrbu Nicolae
  • 230
  • 2
  • 7
  • I can resize my PC window to 320px. It's not Galaxy fold, it's PC – Justinas Jun 02 '21 at 06:34
  • @Justinas, maybe it's not the best solution but actually just with css you can't detect if it's galaxy fold device, question was if it can be made with media queries. Even if you resize your PC window to 320px content will be responsive anyway – Gîrbu Nicolae Jun 02 '21 at 06:39
  • 1
    @Justinas Isn't resizing window on PC to 320px a good moment to set a smaller font-size to fit the content or to keep the layout in view? Very-small-window media queries are as good as mobile-only-javascript-enforced media queries - am I wrong? – webdev-dan Jan 25 '22 at 02:39
  • 1
    @Justinas if using Chrome Dev tools you can select the Samsung Galaxy Fold viewport, also note regarding the answer the Fold model is 280px not 320px. – GherkinInGodmode Apr 06 '22 at 13:34
1

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; } }
Younes Ouma
  • 26
  • 2
0

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.

JW Geertsma
  • 847
  • 3
  • 11
  • 17
alexwojtak
  • 11
  • 3