截止至2016年底,灰机wiki的移动端访问量已经超越了PC段访问量。鉴于大部分编辑者都是在PC端进行操作,可以说对于浏览者而言,移动端已经成为了访问灰机wiki的主要途径。对于我们维基的辛勤编辑者而言,若想让自己的维基能够吸引更多的浏览者,势必要针对移动端对站点进行一些必要的优化。

宽度 vs 高度

宽度和高度是网页布局中常用的两个属性。高度超越了屏幕可显示的范围,就会产生上下移动的滚动条。宽度超越了屏幕可显示的范围,会产生左右移动的滚动条。因为文字是横排的,所以左右滑动查看时,意味着每读一行话就要把屏幕拖回原点。如果只有上下移动的滚动条,则可以把整个屏幕看完再进行拖动。

假使我们使用古代的竖排文字书写,也许我们的网页都会以左右滑动为主。

因为这样的客观原因,如果网页容器宽度超越屏幕的宽度,阅读就会变得十分困难。

屏幕有多宽?

屏幕宽度到底有多宽呢?如果是传统家用电脑屏幕,恐怕不会低于1024px。对于平板电脑和手机来说,则不尽然。虽然手机的分辨率越来越高了,但实际上往往手机增加的是像素密度dpi,对于网页浏览而言,实际大小仍然处于320px-414px的区间(否则文字就太小了)。

访问灰机的常见分辨率

因此,如果网页布局中我们使用超过300px(320px-padding)定宽的布局,就会对手机阅读造成困难。实际上,维基中大部分表格还有一部分图片都会超过300px。

如何解决

我们对于超过宽度的表格进行了一些自动化的处理。比如,.infobox和.navbox都已经在手机端被强制设为100%的宽度。对于图片的缩略图,如果其宽度超过屏幕宽度,我们也强制将其设置为了100%。

对于表格而言,将其限制在100%有些勉为其难。一方面我们可以尽量少用表格,另一方面,如果不得不用表格,我们也可以做一些变通。

在表格外部,加入
<div class="table-responsive"></div>
可以将表格的包裹起来,形成一个左右拖动的容器。这个容器的宽度仍然是屏幕的宽度,不会把整个页面撑开。

用手机访问以查看这个示例:

<div class="table-responsive">
<table style="width:800px;background-color:black">
</table>
</div>

对于一些自定义的定宽块状元素,我们可以为它加上full-width-xs这个类。该类在电脑屏幕上无任何效果,而在手机屏幕上,则会强制改变元素宽度为100%。

用手机访问以查看区别:

<div class="full-width-xs" style="width:600px;height:400px;background-color:black">
</div>

最后,提醒大家,可以利用浏览器预览移动端的效果。以chrome浏览器为例,在页面上单击鼠标右键,选择审查元素,然后点击这个标志: 移动预览.png 就可以实现移动端的预览了。

avatar
填写个人状态d
avatar
1

非常应景!

5年