3

I have created a web page which has a header section, this header section contains Name, menu items on next lines. enter image description here

i have added padding on top of name and above,below menu items. it works perfectly fine for most of the system. However there are systems (windows 10) which is scaled to 150% in display settings. Now since i am using padding in px the space is getting increased more than expected in those system. how can i write custom code for these scenerios where i am not aware of default scale level in different screen size ?

Nikhil Srivastava
  • 259
  • 5
  • 20
  • Media queries work with browser zoom: https://stackoverflow.com/questions/22223866/media-queries-for-different-zoom-levels-of-browser – Gary Thomas Nov 20 '18 at 14:45
  • is that zoomed using css or zoomed using browser or zoomed using windows? That's 3 very different scenarios and your question is quite ambiguous as to which is causing the zoom – Pete Nov 20 '18 at 14:48
  • I agree, but that holds valid for Browser zoom, i am talking about scaling which is done at OS level, in such case the content are zoomed at 150%. If in inspect element i zoom my 1080p screen to 150%, it comes around 826p*550p, at this resolution also my screen looks good, but in reality when i see the content on those screen it looks totally different. when i set browser zoom level to 90% everything falls back to its place. – Nikhil Srivastava Nov 20 '18 at 14:53
  • @pete those laptops are of 1080p resoltion which are zoomed to 150%(recommended) by OS under display settings. – Nikhil Srivastava Nov 20 '18 at 14:55
  • Browser Zoom is kinda like responsive: The page gets bigger, but the site width gets smaller. So if you look at a page in 200% browser zoom, it should about be the same as looking at it with a phone (or the same as resizing your desktop browser). OS zoom is something completely different and varies based on Browser and OS. Edit: seems to be possible with JS but it's really really messy: https://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers – elveti Nov 20 '18 at 14:56
  • @elveti I totally agree!!! i could find a single good solution to resolve this issue, i tried using VH,% and px but none of them work – Nikhil Srivastava Nov 20 '18 at 15:09
  • hmmm not sure how you would detect os level zooming, how about using rem - that way the padding is based on the font size (which should change depending on the zoom?) – Pete Nov 20 '18 at 15:21

0 Answers0