如何使用視口使移動設備縮放到內容的寬度？

我正在寫一本書閱讀器，其中一本書可以是可變寬度，例如，它可以是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

如何使用視口使移動設備縮放到內容的寬度？

回答

相關問題