响应式网站在移动设备上应该如此之高?

善微科技 2017 05月08日 发布

在较小的屏幕上,将事物堆放到单个列中是移动,并且通常,只要内容保持在适当的宽度内,进一步考虑到页面的高度。结果,长沙网站建设注意到,在我自己的设计和许多在野外,移动页长度往往是相当长的。这个帖子是一个建议,至少保持浏览器视口的高度,因为您正在设计响应式网站。

做响应网站的摘录在移动设备上必须要高吗?


但是如果你把它拉到你的手机上,你可能会注意到需要相当多的滚动才能浏览整个页面。在我的Macbook上,页面大约是4500像素高,大约是浏览器窗口可视高度的6倍。相比之下,在我的手机上,页面大约是6,200像素高,或大约是可视高度的10倍。这不是内在的坏; 没有设计法规定您必须使网站在不同尺寸的设备上保持高度,但我认为深入了解这是一个有趣的观察。


所以有什么问题?


再次,我不认为整个页面长度本身是有问题的。我已经注意到,在许多响应式设计中,有意义的内容分组容易在较大的屏幕上发现,但是当事情开始在移动屏幕上叠加时,会变得混乱。例如,在Nexus页面上,第二部分将三个硬件功能组合在一起。在一个足够大的屏幕上,您可以看到这三个方块并排,并且该部分通常最终完全是浏览器可视区域的高度。在手机上,你最终只能看到一个块的一个块。当您滚动浏览页面时,这3件事情并不是明确的,而是将它们分组在一起,而不是世界的尽头,但也不是最佳的。


有办法吗


最近,我一直使用设备视口的高度作为粗略的指南,以帮助确定如何布局内容。目的是为了解决上述问题,可以在任何设备上同时合理地查看旨在分组在一起的内容。在Nexus示例中,替代原始设计可能看起来像这样。


通过大幅度缩小部分标题和缩略图的大小,我们可以将该部分的所有相同内容适用于单个视口。这种变化本身可能只是一个小的增量改进,但总的来说,我发现遵循这个一般准则导致在滚动浏览移动设备页面时更容易遵循的布局。


退步一点...


没有什么特别的设计,我刚刚向你展示。只有许多可能的布局才能实现相同的目标 - 将特定部分中的内容更清晰地分组在一起。如果您决定使用视口高度作为移动布局的指南,那么您应该探索所有不同的方式来定位内容。根据您的设计背景和内容的性质,不同的布局可能会更好。


如没特殊注明,文章均为善微网络原创,转载请注明来自https://www.sanways.com/news/326.html