Ein seltsames Problem: Unter Windows 10 in den Bildschirmeinstellungen einiger Laptops beträgt der Standardwert (empfohlen) 125%. Beim Öffnen einer Webseite ist also alles zu groß, da die Seite zu 100% erstellt wurde

Wie kann damit umgegangen werden? CSS? JS? Ich weiß ehrlich gesagt nicht, wie ich das angehen soll

Einzelheiten:

  • Mit React erstellte Web-App.
  • In 100% ist alles richtig skaliert
  • Vom problematischen Laptop aus werden andere Websites korrekt skaliert (mit den Einstellungen auf 125%).
  • Problematischer Laptop (weiß nicht, ob dies relevant ist) Lenevo yoga 730 15inch

Vielen Dank

15
Blue Bot 18 Apr. 2018 im 11:38

3 Antworten

Beste Antwort

In CSS können Sie Folgendes verwenden (noch nicht Standard):

// refers to 125% @media (-webkit-min-device-pixel-ratio: 1.25) { ... }

Und

@media (-webkit-max-device-pixel-ratio: 1.25) { ... }

In Javascript können Sie verwenden:

window.devicePixelRatio > 1.25 ? doA() : doB()

Referenz:

-webkit-device-pixel-ratio - CSS: Cascading Style Sheets | MDN

Window.devicePixelRatio - Web-API | MDN

4
xingo 19 Apr. 2018 im 02:08

Sie können hierfür die CSS-Auflösung verwenden

/* Exact resolution */
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

/* Minimum resolution */
@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}

/* Maximum resolution */
@media (max-resolution: 300dpi) {
  p {
    background: yellow;
  }
}
0
dtar 21 Feb. 2020 im 19:05

Sie können versuchen, ein Meta-Tag für das Ansichtsfenster im Kopfbereich Ihrer index.html hinzuzufügen:

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
2
Martin Reiche 18 Apr. 2018 im 08:47