Windows 10 по умолчанию при масштабировании выше 100% вызывает проблемы с размером сайта - PullRequest
Новая
       24

Windows 10 по умолчанию при масштабировании выше 100% вызывает проблемы с размером сайта

0 голосов
/ 26 апреля 2020

Таким образом, клиент не доволен тем, как его сайт отображает на своем ноутбуке, потому что Windows масштабирование (не путать с масштабированием браузера) по умолчанию установлено на 125%. Сайт не поврежден, но им не нравится общий уровень масштабирования.

После небольшого исследования это выглядит как рекомендуемое и масштабирование по умолчанию выше 100% не является необычным для некоторых ноутбуков (особенно новее) ноутбуки с их более высокой плотностью пикселей). Мне было предложено, чтобы преобразование всех пикселей на основе CSS в rems (что является большой работой) могло бы исправить это. Тем не менее, я запустил тест, используя базовый размер шрифта 10px, а затем rems для точек останова и для шрифтов, и это не выглядит лучше, когда я переключаюсь между различными масштабами.

На мой взгляд, если ОС настроена на масштаб, превышающий 100%, то все, включая веб-сайты, будет отображаться соответствующим образом. Мне интересно, я что-то здесь упускаю? Я получаю работу с очень дерьмового старого экрана с низким разрешением, так что, возможно, это смешивающий фактор?

fiddle с использованием rem 

html {
  font: 10px;
}

.wrapper {
  display: flex;
  justify-content: center;

  .inner {
    flex: 1;
    padding: 1rem 2rem;
    background: hotpink;

    p {
      font-size: 1.6rem;
    }
  }
}

@media (min-width: 60rem) {
  html {
    font-size: 16px;
  }
  .wrapper {
    .inner {
      flex: 0 1 50rem;
      background: goldenrod;

      p{
          font-size: 1.125rem;
      }
    }
  }
}

и fiddle используя px 

  font: 16px;
}

.wrapper {
  display: flex;
  justify-content: center;

  .inner {
    flex: 1;
    padding: 10px 20px;
    background: hotpink;

    p {
      font-size: 16px;
    }
  }
}

@media (min-width: 600px) {
  .wrapper {
    .inner {
      flex: 0 1 800px;
      background: goldenrod;

      p {
        font-size: 18px;
      }
    }
  }
}

Есть ли решение?

Спасибо

...