2

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
  • 105
  • 1
  • 1
  • 8
  • 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
  • what about UnFold device? – Shurvir Mori Jul 22 '22 at 10:35
  • update your chrome, in inspector now added Fold DEVICE. for responsive check – Shurvir Mori Jul 22 '22 at 10:36

5 Answers5

5

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
  • 268
  • 2
  • 8
  • 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
  • 2
    @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. – Gherkin in God mode 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
  • 857
  • 3
  • 13
  • 19
alexwojtak
  • 11
  • 3
0

It's still in draft stage(as of Sep, 2022), but there's @container media query: https://drafts.csswg.org/css-contain-3/

In MDN web docs,

This doesn't quite achieve what media queries do for our entire layout however. Media queries give us the ability to size things based on ranges. When we add a class or target the element we decide that when the object is in the sidebar it must use the stacked layout. In terms of available space however, it may well be that on large screens the object in the sidebar would have enough space to display in the side-by-side layout.

Meanwhile, I think @media is the most viable option available for now as @Gîrbu Nicolae stated

Joon Hong
  • 1,337
  • 15
  • 23
0
@media (min-width: 900px) and (max-width: 911px) and (orientation: portrait) {}

Tolerance ~5px, working fine for me, I test it

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
NoxaGen
  • 11
  • 2