CSS在纵向模式的小屏幕上添加自动边距

Question

这是我的代码：

​

<html>

<head>
  <style>
    body {
      margin: auto;
      width: 720px;
    }
  </style>

</head>

<body>
  <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</body>

</html>

​

当在全高清屏幕上以纵向模式运行时，一切都很好:段落宽度为720px。如果我将宽度改为1080px，也没问题:没有页边距-段落从页面的一边到另一边。

但如果我尝试在720x1280高清屏幕上以纵向模式观看，则会自动添加130px的边距。

这一切为什么要发生？在较小的屏幕上，“边际:自动”会搞砸吗？我该如何修复它？任何帮助都将不胜感激。

Answer 1

 <style>
    body{
    margin: 0 auto;
    width:720px;}
 </style>

这应该可以工作，检查jsfiddle。