Ipython / Jupyter Notebook HTML beim Anzeigen des mobilen Browsers falsch ausgerichtet

8

Windows 8.1, Python 3.4, Jupyter Notebook

Ich verwende ein benutzerdefiniertes CSS-Stylesheet, das auf github gehostet wird, um das Notizbuch in HTML zu rendern. Wenn ich als HTML downloade und die Datei auf meinem Desktop-Browser anschaue, werden Code, Text, Markdown und Bilder korrekt ausgerichtet und formatiert. Wenn ich jedoch das gleiche Notebook in einem mobilen Browser betrachte, scheint das Notebook einen massiven linken Rand aufzuweisen und ist nicht mehr richtig mit dem Hintergrund ausgerichtet.

Jede Hilfe zur Lösung dieses Problems wird sehr geschätzt. Ich habe Bildbeispiele und mein Jupyter / IPython CSS Stylesheet als Referenz beigefügt. Danke.

Im Desktop-Browser

Im mobilen Browser

Mein Ipython / Jupyter Notebook CSS Stylesheet wird kopiert:

%Vor%

UPDATE:

Hier ist der Dropbox-Link zu der HTML-Datei, die von IPython / Jupyter erzeugt wird, wenn sie als HTML-Datei heruntergeladen wird.

Dropbox-HTML-Datei herunterladen

    
BCR 19.01.2016, 23:15
quelle

2 Antworten

1

Vielleicht ist das nicht das, wonach Sie suchen, aber was ist, wenn Sie ein div um den gesamten Code setzen und seinen Rand auf auto setzen?

Alternativ können Sie ein Master-Div für den Inhalt festlegen:

%Vor%

Sie müssten dann zwei Divs für jede Seite des Masters erstellen und sie auf Folgendes setzen:

%Vor%

Auf diese Weise nehmen divs die gesamte Breite ein und bleiben immer proportional, egal auf welchem ​​Bildschirm sie sich befindet.

    
Justin C 23.01.2016 21:03
quelle
1

Eine Abhilfe wäre dies:

  • Verwenden Sie Medienabfragen für kleinere Bildschirme.
  • Versuchen Sie, beim Bootstraps-Grid-System zu bleiben, anstatt nach dem traditionellen Ansatz zu suchen, die Ränder und das Padding manuell anzuwenden (wenn Sie sich die HTML-Datei ansehen, haben Sie herausgefunden, dass Sie Bootstrap verwendet haben).

  • Den div-Inhalt (den, der den gesamten Text enthält) in einen div / container hüllen und einen negativen CSS-Rand auf den Inhalt (nicht den Container) anwenden, etwa so:

    media (min-width: 480px) and (max-width:768px){ #container #some-div{ margin-left: -50%; } }

  • Verwenden Sie em anstelle von px .

Damit wird der gesamte Text nach links verschoben, wenn er im mobilen Gerät geöffnet wird.

Sie können auch einen position: absolute; top: -10%; zum obigen Code hinzufügen, nur um es zu testen.

Ich hoffe, es hilft ...

    
dvenkatsagar 25.01.2016 06:58
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Warum hängt Pexpect nach der Ausführung bestimmter Befehle zeitweise nicht (EOF wird nicht erkannt)?