CSS styles rendering differently on windows 10 and ubuntu 20.04 LTS

user_11024803 0
Viewed 206

I have been working on a basic chat app. I was working on ubuntu and I applied styles to each component according to the chrome browser on ubuntu. But on windows the styles are rendering differently, alignment is not proper and everything is bigger than expected. Some of the solutions I tried so far (and still facing the same issue),

  1. Using css reset - only font-size is reset
  2. Using line-height instead of padding property - didn't work for me

Here are screenshots of the output on chrome browsers for windows 10 and ubuntu 20.04 LTS

Chrome | Windows 10 Chrome | Windows 10

Chrome | Ubuntu 20.04 LTS Chrome | Ubuntu 20.04 LTS

May be there are simple ways to fix this problem. Thanks in advance.

css html
2 Answers

press ctrl and '-' to zoom out, probably the website is just zoomed in, happens to me a lot.

user_144680210

ISSUE I was facing the same issue. The websites which I made using tailwindcss in Ubuntu were around 10% zoomed out in my Windows 10.

REASON Windows 10 by default zooms your all applications.

  1. Right click on your windows 10 desktop.

  2. Click Display Settings.

  3. Therein display you can see the option Scale & Layout. And there by default the zoom is 125%.

  4. If you will change it to 100% then you will see that your website is perfectly aligned same as Ubuntu.

SOLUTION Maybe there could be some js fix for this out there but this will lead to more complexities.

user_70569260
Related