如何使用视口使移动设备缩放到内容的宽度？

我正在写一本书阅读器，其中一本书可以是可变宽度，例如，它可以是1028px或它可以是2000px或560px宽度。如何使用视口使移动设备缩放到内容的宽度？

我希望移动设备能够自动缩放，以便他们在查看书籍时将书籍缩放为屏幕宽度。

什么我目前做的是...（例如书中有1028px宽度& 1648px高）

在头：

<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>

这堆垂直的页面，其中工程......除了有两个问题：

在移动设备中的内容实际上并不完全适合在屏幕上，它需要一点水平滚动查看全部的。所以基本上它不会完全放大设备屏幕的宽度。
在移动设备上右侧有大量空白区域，水平滚动条存在，它允许用户向右滚动到空白区域。如果浏览器窗口大于内容宽度，则在桌面浏览器上不会正确禁用水平滚动。

我一定在做错事。有任何想法吗？

谢谢！

来源

2016-02-26 Alasdair

试试这个

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

，而不是这个..

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

我想移动设备自动缩放，这样，当他们查看这本书将缩放本书永远是屏幕的宽度。

如果您希望宽度响应屏幕宽度从您的css删除width:1028px;。目前它的意思是永远那么宽，从不宽，从不缩小。

来源

2016-02-26 11:58:29

是的，这就是我想要的。确切地说，这个尺寸，从来不宽，从不缩小。我不希望宽度响应屏幕，我希望屏幕响应宽度。 – Alasdair

如果屏幕小于1028像素，这显然是不可能的。内容缩放到屏幕..不是相反的方式。 –

在我看来是错误的做法。

任何东西reponsive最好的做法是

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

如果要调整内容的可读性，你应该想想字体大小，屏幕没有尺寸或“容器”的大小。

你可以使用em单位或rem单位和调整你的整个阅读体验改变一个简单的价值的相对大小：font-size在body。

默认1EM = 16px的= 100％ - 这样你就可以开始：

body { 
    font-size:100% 
}

通过JavaScript你可以将该值更改为更大或更小和你的整个内容字体大小将相应扩大。

来源

2016-02-26 12:00:45 valerio0999

感谢您的评论，但这些是由多种媒体类型组成的固定布局页面，而不是简单的文本页面。 – Alasdair

如何使用视口使移动设备缩放到内容的宽度？

回答

相关问题