在設(shè)計響應(yīng)式網(wǎng)站時，我們傾向于專注于在當(dāng)今世界各種屏幕寬度內(nèi)保持內(nèi)容的格式。這是有道理的，因為水平滾動不是特別用戶友好的，因此將設(shè)計約束到瀏覽器的視口寬度通常是給定的。

在較小的屏幕上，將東西堆疊到單個列中是移動，并且通常，只要內(nèi)容保持在適當(dāng)?shù)膶挾葍?nèi)，進(jìn)一步認(rèn)為頁面的高度不被賦予。結(jié)果，我注意到，在我自己的設(shè)計和許多在野外，移動頁面長度往往是相當(dāng)長的。這個帖子是一個建議，至少保持瀏覽器視口的高度，因為您正在設(shè)計響應(yīng)式網(wǎng)站。

但是如果你把它拉到你的手機(jī)上，你可能會注意到需要相當(dāng)多的滾動才能看到整個頁面。在我的Macbook上，頁面大約是4500像素高，大約是瀏覽器窗口可視高度的6倍。相比之下，在我的手機(jī)上，頁面高約6,200像素，或大約是可見高度的10倍。這不是內(nèi)在的壞; 沒有設(shè)計法規(guī)定您必須使網(wǎng)站在不同尺寸的設(shè)備上保持高度，但我認(rèn)為深入了解這是一個有趣的觀察。

所以有什么問題？

再次，我不認(rèn)為整個頁面長度本身是有問題的。我已經(jīng)注意到，在許多響應(yīng)式設(shè)計中，有意義的內(nèi)容分組容易在較大的屏幕上發(fā)現(xiàn)，但是當(dāng)事情開始在移動屏幕上堆疊時變得混亂。例如，在Nexus頁面上，第二部分將三個硬件功能組合在一起。在一個足夠大的屏幕上，您可以看到這三個塊并排，并且該部分通常最終完全是瀏覽器可視區(qū)域的高度。在手機(jī)上，你最終只能看到一個塊的一個塊。當(dāng)您瀏覽頁面時，這3件事情并不是明確的，而是將它們分組在一起，而不是世界的盡頭，但也不是最佳的。

有替代嗎？

最近，我一直使用設(shè)備視口的高度作為粗略的指導(dǎo)，以幫助確定如何布局內(nèi)容。意圖是解決上面提到的問題，可以在任何設(shè)備上同時合理地查看要組合在一起的內(nèi)容。在Nexus示例中，替代原始設(shè)計可能看起來像這樣。

通過大幅度縮小部分標(biāo)題和縮略圖的大小，我們可以將該部分的所有相同內(nèi)容合并到單個視口中。這種改變本身可能只是一個小的增量改進(jìn)，但總的來說，我發(fā)現(xiàn)遵循這個一般準(zhǔn)則導(dǎo)致在滾動瀏覽移動設(shè)備頁面時更容易遵循的布局。