Frage Wie aktiviere ich iOS 5 Safari Reader auf meiner Website?


Wie funktioniert die Reader-Funktion von Mobile Safari in iOS 5? Wie aktiviere ich es auf meiner Website? Wie kann ich feststellen, welcher Inhalt auf meiner Seite ein Artikel ist, der diese Funktion auslöst?


75
2018-06-08 13:56


Ursprung


Antworten:


Viele der hier geposteten Antworten enthalten falsche Informationen. Hier sind einige Korrekturen / Klarstellungen:

  1. Das <article> Element funktioniert gut als Wrapper; Safari Reader erkennt es. Meine Website ist ein Beispiel. Es spielt keine Rolle, welches Wrapper-Element Sie auswählen, solange es ein anderes gibt <body> oder <p>. Sie können verwenden <article>, <div>, <section>; oder Elemente, die für diesen Zweck semantisch falsch sind, wie <nav>, <aside>, <footer>, <header>; oder sogar Inline-Elemente wie <span> (!).

  2. Es sind keine Überschriften erforderlich, damit Reader funktioniert. Hier ist ein Beispiel für ein Dokument ohne <h*> Elemente, auf denen Reader gut funktioniert: http://mathiasbynens.be/demo/safari-reader-test-3

Ich habe hier einige Details zu meinen Ergebnissen veröffentlicht: http://mathiasbynens.be/notes/safari-reader


66
2018-06-10 12:11



Ich habe etwa 100 Variationen davon auf meinem iPhone getestet, um herauszufinden, was diesen schwer fassbaren Reader-Status auslöst. Meine Schlussfolgerungen sind wie folgt:

Hier ist, was ich gefunden habe, eine Auswirkung:

  • In dem Artikel, der den "Reader" auslösen soll, sind ungefähr 200 oder mehr Wörter (oder 1000 Zeichen einschließlich Leerzeichen) erforderlich
  • Der Leser wurde NIEMALS ausgelöst, wenn ich weniger als 170 Wörter hatte; obwohl es manchmal ausgelöst wurde, wenn ich 180 oder 190 Wörter hatte.
  • Text innerhalb bestimmter Elemente wie z <ol> oder <ul> (die normalerweise nicht für eine Geschichte verwendet werden) zählen nicht zu den 200 Wörtern (sie werden jedoch im Leser angezeigt, wenn der Leser aus anderen Gründen ausgelöst wird)
  • Wrapping der 200 Wörter in einem Blockelement wie a <div> oder <article> scheint notwendig zu sein (das heißt, ich wäre überrascht, wenn es Websites gäbe, wo das nicht schon der Fall war)

Für die vollständige Offenlegung, hier ist, was ich gefunden habe, hatte keine Auswirkungen:

  • Ob mit einer Kopfzeile oder nicht
  • Ob Sie den Text in a verpacken <p> oder lassen Sie es frei fließen
  • Interpunktionen (dh das Entfernen aller Punkte, Kommas usw. hatte keine Auswirkungen)

7
2018-01-15 23:21



Es scheint, dass der Algorithmus, auf dem es basiert, nach P-Tags sucht und Delimiter wie "." im inneren Text. Die Sektion (div) mit den meisten Punkten steht im Fokus.

sehen: http://lab.arc90.com/experimente/readability/

Scheint die Basis für den Reader-Modus zu sein, zumindest weist Safari es den Acknowledgements zu, siehe:

file: /// C: /Programm%20Files/Safari/Safari.resources/Help/Acknowledgements.html

Arc90 (Lesbarkeit) Copyright Arc90 Inc.
Die Lesbarkeit ist unter der Apache-Lizenz, Version 2.0, lizenziert.


7
2018-06-08 16:46



Diese Frage (So deaktivieren Sie Safari Reader auf einer Webseite) hat mehr Details. Kopiert hier:


Ich bin neugierig darauf, mehr darüber zu erfahren, was die Reader-Option in Safari auslöst und welche nicht. Ich würde nicht planen, etwas zu implementieren, das es deaktivieren würde, aber als eine technische Übung neugierig.

Hier ist, was ich bisher mit einigen grundlegenden Spielen gelernt habe:

Sie benötigen mindestens ein H-Tag   Es wird nicht nur nach der Anzahl der Zeichen gezählt, sondern auch nach der Anzahl der P-Tags und der Länge   Sucht wahrscheinlich nach Satzbrüchen. und andere Kriterien   Safari wird den 'Reader' bereitstellen, wenn er mit einem H-Tag versehen ist und folgendes:

1 P-Tag, 2417 Zeichen   4 P-Tags, 1527 Zeichen   5 P-Tags, 1150 Zeichen   6 P-Tags, 862 Zeichen   Wenn Sie 1 Zeichen von einem der obigen Zeichen subtrahieren, ist die Option "Leser" nicht verfügbar.

Ich sollte beachten, dass die Anzahl der Zeichen des H-Tags eine Rolle spielt, dies aber leider nicht erkannte, als ich die obigen Ergebnisse festlegte. Übernehmen Sie 20 Zeichen für den H-Tag und fixieren Sie diese in den obigen Ergebnissen.

Einige andere interessante Dinge:

Einstellung für P-Tags entfernt sie von der Zählung   Wenn die Anzeige auf "none" gesetzt wurde und sie anschließend 230 ms später mit Javascript angezeigt wurde, wurde die Option "Reader" ebenfalls deaktiviert

Ich würde mich interessieren, wenn jemand das vollständig bestimmen kann.


3
2018-06-09 09:08



Ich habe damit gekämpft. Endlich nahm ich das heraus <ul> Markierungen in meiner Geschichte und Viola! es fing an zu arbeiten.

Ich habe keine Hülle um den Körper gelegt, aber vielleicht habe ich es zufällig getan.


2
2018-03-22 15:09



HTML5-Artikel-Tag löst es bei meinen Tests nicht aus. Es scheint auch nicht auf Offline-Inhalt zu funktionieren (d. H. Auf Ihrem lokalen Computer gespeicherte Seiten).

Was es auszulösen scheint, ist ein Div Block mit vielen P's mit viel Text.


1
2018-06-08 16:07



Die P-Tag-Theorie klingt gut. Ich denke, es erkennt auch andere Elemente. Eine unserer Seiten mit 6 Absätzen hat den Reader nicht ausgelöst, sondern einen mit 4 Absätzen und einem Img-Tag.

Es ist auch intelligent genug, um mehrseitige Artikel zu erkennen. Probieren Sie es auf einem mehrseitigen Artikel auf nytimes.com oder nymag.com aus. Würde mich interessieren, wie es das auch erkennt.


1
2018-06-08 16:46