查看移动浏览器时，Ipython/Jupyter Notebook HTML 未对齐

Question

Windows 8.1, Python 3.4, Jupyter Notebook

我正在使用托管在 github 上的自定义 CSS 样式表以 HTML 格式呈现笔记本。当我以HTML 下载并在我的桌面浏览器上查看文件时，代码、文本、markdown 和图像已正确对齐和格式化。但是，当我在移动浏览器上查看同一个笔记本时，该笔记本似乎有一个巨大的左边距填充，并且不再与背景正确对齐。

任何解决此问题的帮助将不胜感激。我附上了图像样本和我的 Jupyter/IPython CSS 样式表以供参考。谢谢。

在桌面浏览器上

在移动浏览器上

我的 Ipython/Jupyter Notebook CSS 样式表复制如下：

<style>
    div.cell{
        width: 1000px; /* altered from 850px*/
        margin-left: 0%!important; /*altered from 10%*/
        margin-right: 5%; /*altered from auto%*/
    }
    /*div.text_cell{added from frankcleary.com but didn't look great for current setup
        margin-top:-2px;
        margin-bottom:-2px;
        padding-top:2px;
        padding-bottom:2px;
        border-left:2px solid #505050;
        border-collapse:collapse;
        border-top:none;
        border-bottom:none;
    }*/
    h1 {
        font-family: "Open sans",verdana,arial,sans-serif;
    }
    .text_cell_render h1 {
        font-weight: 200;
        font-size: 40pt;
        line-height: 100%;
        color:#447adb;
        margin-bottom: 0em;
        margin-top: 0em;
        display: block;
        white-space: nowrap;
    } 
    h2 {
        font-family: "Open sans",verdana,arial,sans-serif;
        text-indent:1em;
    }
    .text_cell_render h2 {
        font-weight: 200;
        font-size: 20pt;
        font-style: italic;
        line-height: 100%;
        color:#447adb;
        margin-bottom: 1.5em;
        margin-top: 0.5em;
        display: block;
        white-space: nowrap;
    } 
    h3 {
        font-family: "Open sans",verdana,arial,sans-serif;
    }
    .text_cell_render h3 {
        font-weight: 300;
        font-size: 18pt;
        line-height: 100%;
        color:#447adb;
        margin-bottom: 0.5em;
        margin-top: 2em;
        display: block;
        white-space: nowrap;
    }
    h4 {
        font-family: "Open sans",verdana,arial,sans-serif;
    }
    .text_cell_render h4 {
        font-weight: 300;
        font-size: 16pt;
        color:#447adb;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
        display: block;
        white-space: nowrap;
    }
    h5 {
        font-family: "Open sans",verdana,arial,sans-serif;
    }
    .text_cell_render h5 {
        font-weight: 300;
        font-style: normal;
        color: #1d3b84;
        font-size: 16pt;
        margin-bottom: 0em;
        margin-top: 1.5em;
        display: block;
        white-space: nowrap;
    }
    div.text_cell_render{
        font-family: "Open sans",verdana,arial,sans-serif;
        line-height: 135%;
        font-size: 125%;
        width:750px; /* altered from 750px */
        margin-left:auto;
        margin-right:auto;
        text-align:justify;
        text-justify:inter-word;
    }
    div.output_subarea.output_text.output_pyout {
        overflow-x: auto;
        overflow-y: scroll;
        max-height: 300px;
    }
    div.output_subarea.output_stream.output_stdout.output_text {
        overflow-x: auto;
        overflow-y: scroll;
        max-height: 300px;
    }
    div.output_subarea.output_html.rendered_html {
        overflow-x: scroll;
        max-width: 100%;
        overflow-y: scroll;/* was commented out */
        max-height: 300px;/*  was commented out   */
    }
    code{
      font-size: 78%;
    }
    .rendered_html code{
        background-color: transparent;
        white-space: inherit;   
    }
    ul{
        /* color:#447adb; */  
        margin: 2em;
    }
    ul li{
        padding-left: 0.5em; 
        margin-bottom: 0.5em; 
        margin-top: 0.5em; 
    }
    ul li li{
        padding-left: 0.2em; 
        margin-bottom: 0.2em; 
        margin-top: 0.2em; 
    }
    ol{
        /* color:#447adb; */  
        margin: 2em;
    }
    ol li{
        padding-left: 0.5em; 
        margin-bottom: 0.5em; 
        margin-top: 0.5em; 
    }
    /*.prompt{
        display: None;
    } */

    ul li{
        padding-left: 0.5em; 
        margin-bottom: 0.5em; 
        margin-top: 0.2em; 
    }
    a:link{
       font-weight: bold;
       color:#447adb;
    }
    a:visited{
       font-weight: bold;
       color: #1d3b84;
    }
    a:hover{
       font-weight: bold;
       color: #1d3b84;
    }
    a:focus{
       font-weight: bold;
       color:#447adb;
    }
    a:active{
       font-weight: bold;
       color:#447adb;
    }
    .rendered_html :link {
       text-decoration: none; 
    }
    .rendered_html :hover {
       text-decoration: none; 
    }
    .CodeMirror{
            font-family: "Source Code Pro", source-code-pro,Consolas, monospace;
        }    
    .rendered_html :visited {
      text-decoration: none;
    }
    .rendered_html :focus {
      text-decoration: none;
    }
    .rendered_html :active {
      text-decoration: none;
    }
    .warning{
        color: rgb( 240, 20, 20 )
    } 
    hr {
      color: #f3f3f3;
      background-color: #f3f3f3;
      height: 1px;
    }
    blockquote{
      display:block;
      background: #f3f3f3;
      font-family: "Open sans",verdana,arial,sans-serif;
      width:700px; /*altered from 610px*/
      padding: 5px 5px 5px 5px; /*altered from 15px 15px 15px 15px*/
      text-align:justify;
      text-justify:inter-word;
      }
      blockquote p {
        margin-bottom: 0;
        line-height: 125%;
        font-size: 100%;
        text-align: center;
      }
    div#notebook_panel {/* added from theming w/ Hammond */
        box-shadow: none;
        -webkit-box-shadow: none;
        border-top: none;
    }
   /* element.style {
    } */  
</style>
<script>
    MathJax.Hub.Config({
                        TeX: {
                           extensions: ["AMSmath.js"]
                           },
                tex2jax: {
                    inlineMath: [ ["$","$"], ["\\(","\\)"] ],
                    displayMath: [ ["$$","$$"], ["\\[","\\]"] ]
                },
                displayAlign: "center", // Change this to "center" to center equations.
                "HTML-CSS": {
                    styles: {".MathJax_Display": {"margin": 4}}
                }
        });
</script>

更新：

这是 IPython/Jupyter 下载为 HTML 文件时生成的 HTML 文件的 Dropbox 链接。

Dropbox HTML file download

Answer 1

也许这根本不是您想要的，但是如果您在整个代码周围放置一个 div 并将其边距设置为 auto 会怎样？

或者，您可以围绕内容设置一个主 div：

width: 70vw;

然后，您必须为 master 的任一侧创建两个 div 并将每个设置为：

width: 15vw;

这样，div 占据了整个宽度，并且无论在哪个屏幕上都始终保持比例。

Answer 2

一种解决方法是这样做：

• 对较小的屏幕使用媒体查询。
• 尝试坚持使用 Bootstraps 网格系统，而不是采用手动应用边距和填充的传统方法。（查看 HTML 文件，发现您使用了 bootstrap）。

• 将 div 内容（包含所有文本的内容）封装到 div/container 中，并对内容（而不是容器）应用负边距 CSS，如下所示：

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

• 使用em 而不是px。

这将在移动设备中打开时将整个文本部分向左移动。

您也可以在上面的代码中添加position: absolute; top: -10%;，只是为了测试一下。

希望对你有帮助...