Wie man die Standardhöhe und -breite des eingebetteten PDFs einstellt

Standardmäßig variiert Höhe und Breite einer eingebetteten PDF-Vorschau in einem Artikel je nach Browser des Lesers. Man kann für alle PDF-Vorschauen mit benutzerdefiniertem CSS eine einheitliche feste Größe festlegen, sodass die Vorschau für alle Leser in denselben Maßen gerendert wird.

HINWEIS

Dieser Workaround gilt nur für Artikel, die im Advanced WYSIWYG-Editor erstellt wurden. PDF-Vorschauen in den Markdown-Editor-Artikeln sind nicht betroffen.

Wann sollte man diese Lösung verwenden

Uneinheitliche PDF-Vorschaugrößen über Browser hinweg: Browser stellen eingebettete PDF-Objekte in unterschiedlichen Standardgrößen dar. Diese Korrektur erzwingt eine konstante Größe.
Kontrolle der Vorschau-Prominenz: Setze eine höhere Höhe, um dem PDF mehr vertikalen Platz auf der Seite zu geben, oder eine kleinere Größe, damit es kompakt neben dem umliegenden Inhalt bleibt.

WARNUNG

Der CSS-Selektor object zielt auf alle <object> Elemente der Seite ab, nicht nur auf PDF-Einbettungen. Wenn deine Wissensdatenbank Tags für andere Inhaltstypen (wie SVGs oder andere eingebettete Medien) verwendet <object> , werden diese durch diesen Ausschnitt ebenfalls verkleinert.

Kurze Referenz

Ersetzen Sie 500px sie durch Ihre gewünschten Höhen- und Breitenwerte.

object {
    height: 500px !important;
    width: 500px !important;
}

Wie man die Höhe und Breite der PDF-Vorschau einlegt

Im Knowledge Base-Portal gehen Sie zu Einstellungen > Knowledge Base-Seite > Custom CSS & JavaScript.

Knowledge base site settings page showing the Custom CSS and JavaScript option in the left navigation.

Wählen Sie den CSS-Tab und fügen Sie den folgenden Ausschnitt ein:

object {
    height: 500px !important;
    width: 500px !important;
}

Ersetze beide 500px Werte durch deine gewünschte Höhe und Breite.
Klicken Sie auf Speichern.

Custom CSS editor showing the PDF object height and width snippet pasted in the CSS tab with the Save button visible.

Ergebnis

Nach dem Speichern des CSS werden eingebettete PDF-Vorschauen in allen Browsern in den festgelegten festen Dimensionen gerendert.

Knowledge Base site article showing an embedded PDF preview rendered at a fixed height and width set by Custom CSS.

Umfang und Reichweite

Gegenstand	Detail
Umfang	Global, alle `<object>` Elemente in allen WYSIWYG-Editor-Artikeln
Editor-Unterstützung	Nur der erweiterte WYSIWYG-Editor. Markdown-Editor-Artikel sind nicht betroffen
Standard-Beispielgröße	`500px` × `500px`, passen Sie sich an Ihre Layoutbedürfnisse an
Höhe und Breite	Unabhängig gesetzt, kann man für jeden verschiedene Werte verwenden
Prozentwerte	Unterstützt, verwende `width: 100%` , um die Breite des Artikelcontainers zu füllen

Best Practices

Setze die Breite auf einen Prozentsatz statt eines festen Pixelwerts, wo möglich: width: 100% füllt den Artikelbehälter und passt sich an verschiedene Bildschirmgrößen an, während ein fester 500px auf schmalen Bildschirmen überlaufen oder auf breiten Bildschirmen zu klein erscheinen kann. Verwenden Sie feste Werte nur, wenn Sie eine präzise, unveränderte Größe benötigen.
Stelle die Höhe relativ zum Inhalt deines PDFs ein: Eine zu geringe Höhe zwingt die Leser, im Vorschaufeld zu scrollen. Erwägen 600px Sie ein 700px Standard-A4-Porträt-PDF, um mindestens eine ganze Seite ohne Scrollen anzuzeigen.
Test auf dem Handy nach der Anwendung: Feste Pixelmaße lassen sich auf kleinen Bildschirmen nicht verkleinern. Wenn Ihre Wissensdatenbank erheblichen mobilen Verkehr hat, achten Sie darauf, dass die PDF-Vorschau das Artikellayout auf schmalen Sichtfenstern nicht überfließt.
Verwenden Sie bei Bedarf einen spezifischeren Selektor: Wenn der breite object Selektor andere eingebettete Inhalte auf Ihrer Seite beeinflusst, ersetzen Sie ihn durch einen gezielteren Selektor. Zum Beispiel article p object beschränkt sich der Umfang auf <object> Elemente in Artikelabsätzen.