html - 如何使用视口(viewport)使移动设备缩放到内容的宽度？

Question

我正在写一个图书阅读器，其中一本书的宽度可以是可变的，例如，它可以是 1028 像素，也可以是 2000 像素或 560 像素宽度。

我希望移动设备能够自动缩放，这样当他们查看这本书时，它就会将这本书缩放到屏幕的宽度。

我目前正在做的是...(示例书的宽度为 1028 像素，高度为 1648 像素)

在头部:

<meta name="viewport" content="width=1028"/>

在样式表中:

body { margin:0; padding:0; }
.bz { margin:0; padding:0; overflow:none; width:1028px; }
.pz { width:1028px; height:1648px; position:relative; }

主体的形式是:

<div class="bz">
   <div class="pz">
     Page 1 content
   </div>
   <div class="pz">
     Page 2 content
   </div>
   <div class="pz">
     Page 3 content
   </div>
</div>

这会垂直堆叠页面，这是有效的...除了有两个问题:

1. 在移动设备上，内容实际上并不能完美地显示在屏幕上，需要稍微水平滚动才能查看所有内容。所以基本上它没有完全缩放到设备屏幕的宽度。

2. 在移动设备上，右侧有大量空白，存在水平滚动条，它允许用户向右滚动很远，进入大量空白。这不会发生在桌面浏览器上，如果浏览器窗口大于内容宽度，它会正确禁用水平滚动。

我一定是做错了什么。有什么想法吗？

谢谢!

Answer 1

我认为这是错误的做法。

任何响应的最佳实践是

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果你想调整内容的可读性，你应该考虑字体大小，而不是屏幕大小或“容器”大小。

您可以使用 em 单位或 rem 单位并调整整个阅读体验的相对大小，更改一个简单的值:font-size在 body 中。

默认 1em = 16px = 100% - 所以你可以开始:

body {
    font-size:100%
}

通过 javascript，您可以将该值更改为更大或更小，并且您的整个内容字体大小将相应地缩放。