In den eBook-Readern von Tolino steckt auch ein Webbrowser. Welche Fähigkeiten hat der eigentlich? Und lohnt es sich, eigens für eBook-Reader optimierte Webseiten zu bauen?
User Agent String für Tolino Webbrowser
Jeder Browser strahlt seine eigene Browser-Kennung ab: Den User Agent String. Er verrät nicht nur, welche Browser-Software in welcher Version im Einsatz ist, sondern auch meist das Betriebssystem.
Für einen Tolino Shine sieht das wie folgt aus:
Mozilla/5.0 (Linux; Android 8.1.0; de-; tolino shine 4/16.1.0) AppleWebKit/537.36 (KHTML, like Gecko) Verions/4.0 Chrome/61.0.0.0 Mobile Mobile Safari/537.36
Damit lüften sich mehrere Geheimnisse: Nicht nur ist auf dem Tolino ein Android 8 als Betriebssystem im Einsatz, sondern der Browser ist auch ein veralteter Google Chrome 61. (Zum Zeitpunkt der Untersuchung war gerade der Google Chrome 121 aktuell.) Damit beherrscht er leider nicht alle modernen Tricks von CSS und ECMAScript, ist aber für Brot-und-Butter-Websites immer noch eine sehr gute Wahl.
Besondere Header
Mein Tolino Webbrowser hat eine interessante Eigenheit: Er strahlt an jeden besuchten Web-Server einen eigenen Header ab:
X-REQUESTED-WITH: de.telekom.epub
Tatsächlich gibt es möglicherweise historische Gründe für diesen Header, uns hilft dies aber sonst nicht weiter. Viel spannender ist für uns…
Screen Properties für den Tolino Webbrowser
Die physische Bildschirmgröße des Tolino Shine 4 ist 1072×1448 Pixel. Im Web wird dabei ein Device Pixel Ratio von 1.875 angenommen.
Media Queries für den Tolino Webbrowser
Nun haben wir auf einem eBook-Reader zwei Herausforderungen, die bei der Gestaltung von Websites berücksichtigt werden müssen:
- eBook-Reader haben nur wenige Graustufen zur Verfügung (beim Tolino Shine 16 Graustufen).
- ePaper-Displays eignen sich wenig für Animationen.
- eBook-Reader werden höchstens per Touch bedient.
Sinnvoll wäre also eine Reaktion des Webbrowsers auf folgende Media Queries:
Und hier kommt der etwas traurige Part: In Bezug auf Media Queries gibt es leider keine Anpassungen des Google Chrome auf dem Tolino gegenüber einem normalen Google Chrome auf einem Android-Smartphone oder -Tablet:
| Media Query | Value |
|---|---|
| Media type | screen |
| Monochrome | false |
| Color | true |
| Width | 572px |
| Height | 773px |
| Resolution (dpi) | 180 |
| Colors | 8 |
| Orientation | portrait |
| Script | false |
| Hover | false |
| Pointer | coarse |
| Prefers reduced motion | false |
Kurz gesprochen gibt es also keine Media Query, mit der das CSS einer Website für den Webbrowser des Tolino zugeschnitten werden kann.
Und trotzdem: CSS für eBook-Reader
Meine Lösung für dieses Dilemma ist wenig schön, aber besser als nichts:
(function () {
if (window.navigator.userAgent.match(/(Tolino|Kindle)/i)) {
document.body.classList.add("is-ebook-reader");
}
})();
Auf jeder neuen Seite wird mit einer kleinen Zeile JavaScript kurz überprüft, ob es im User Agent String einen Hinweis darauf gibt, dass es sich bei dem besuchenden Browser um einen eBook-Reader handelt. Wenn ja, wird der Seite eine CSS-Klasse is-ebook-reader hinzugefügt.
Zum Spaß habe ich das hier in diesen Blog eingebaut, und einfach mittels CSS Custom Properties eine kleine Fallunterscheidung in mein CSS gebaut. Eine ganz einfache Lösung könnte aber wie folgt aussehen:
:root {
--color-background: #eee;
--color-text: #112;
--color-link: orange;
--text-decoration-link: none
}
.is-ebook-reader {
--color-background: white;
--color-text: black;
--color-link: black;
--text-decoration-link: underline dotted;
}
a {
color: var(--color-link);
text-decoration: var(--text-decoration-link);
}