0

I encountered a problem where the screen resolution on my laptop and PC is the same, 1920x1080, but in Windows there is a setting called 'Change the size of text, apps, and other items.' On my PC, it is set to 100%, while on the laptop, it's set to 125%. Is there a way to set a parameter in CSS so that when a user enters with 125%, the browser will zoom out the webpage by 25%? I would greatly appreciate any help. Below is a test component where the text sizes are different on the laptop and PC

SCSS:

$sizeImg: 75%;

.test {
    @apply w-screen h-screen flex;
  
    .cover {
        @apply w-[50%] relative flex justify-end items-center;
        
        &:before {
            content: '';
            @apply bg-slate-400 absolute;
            width: calc(100% - #{$sizeImg} / 2);
            height: 100%;
            left: 0;
        }
    }

    .text {
        @apply w-full bg-slate-600;
    }
}

Component:

import React, { useState } from 'react'
import './Test.scss';
import image from '../../assets/images/MainPhoto.png'

function Test() {
  return (
    <div className='test'>
      <div className="cover">
        <p>text</p>
      </div>
      <div className="text"></div>
    </div>
  )
}

export default Test;
Fa4stik
  • 9
  • 4
  • Could you explain some more why you want to do this? It would seem to be defeating an accessibility setting which the user has chosen. – A Haworth Jun 11 '23 at 16:40
  • The problem is that 125% is installed by default on the laptop, but when I open the well-known sites (apple, microsoft and other) there are no such problems. Perhaps there is some property that automatically resizes the page, block, depending on the settings, the browser determines this. I hope you understand what I'm talking about – Fa4stik Jun 11 '23 at 18:20
  • Maybe this helps. How to target users with higher zoom levels - https://stackoverflow.com/a/27154096/20896315 – Ferris Jun 11 '23 at 18:50
  • @Ferris, ohh thanks a loot! This my problem, you helped me a lot – Fa4stik Jun 12 '23 at 08:31

0 Answers0