Windows 8.1、Python 3.4、Jupyter 笔记本
我正在使用 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>更新:
这是下载为 HTML 文件时由 IPython/Jupyter 生成的 HTML 文件的保管箱链接。
最佳答案
也许这根本不是您想要的，但是如果您在整个代码周围放置一个 div 并将其边距设置为 auto 会怎么样？
或者，您可以围绕内容设置一个 master div 来:
width: 70vw;
然后您必须为母版的任一侧创建两个 div，并将每个设置为:
width: 15vw;
这样一来，div 就占据了整个宽度，并且无论在什么屏幕上，都会始终保持比例。
关于python - 查看移动浏览器时，Ipython/Jupyter Notebook HTML 未对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34888742/