【网站实战】304 | 电脑版正常,但用手机看文章,排版怪怪的,会出现奇怪的空白。(分行符号的关系)

网友来信询问:
我的网站文章手机版看起来,排版都怪怪的。如上图。
不知道怎么改善?

这个一看就是按了enter「分行符号」的问题。

直接举个例子说明:
电脑版的版面比较宽,假设一行可以有40个字

手机版的版面比较窄,假设一行可以有20个字。

例如,你一段中有120个字(中间没有分行符号),这在电脑版中就是3行,手机版中就是6行,到这边都OK,正常。

但如果你一段有120个字,然后你自己按Enter(分行),这样在电脑版中看起来正常,但在手机版中就会出现网友问的这种问题,怎么莫名奇妙自己换行了。

说穿了,这就是你自己在不该分段的地方按Enter造成的。

我问网友:你是不是先在word中写,然后在COPY到网站中来?你把你的word档寄来我看看。

网友:是。

▲这是网友的Word,明明是同一段,但不知道为什么却有分段的标记。

所以当网友直接copy到网站的编辑器时,会连同分段的标记一起copy过去,这在电脑版上看没区别,正常,跟在word看起来一样,但在手机版因为版面窄的关系就会出现奇怪的「空白」。

这就是网友一开始问的问题,为什么手机看文章,会出现奇怪的空白。

好,我特地写这一篇文,我主要想说三点:

一、不需要在WORD中先打文章,直接在网站编辑比较省事
因为你在WORD中打,无论你怎么排版,到网站中又乱掉,那还不如直接在网站中打,还没打完你就设定「隐藏」就好了。

另外在WORD中不要做任何的排版(字体颜色、大小这些都不要),排版统一由网站的CSS设定控制,这样你日后要改版型时,才会能自动调整。

举例,你在WORD中把文字设定成黑色+12级字,你贴到网站就是黑色+12级字,而且永远12级字,你改天换版本你要变成其他的级字,可以,你要一篇一篇修改,这样会很累。

二、实体文章跟网文的分段是不同的概念

举例,实体文章是每一段的前面要空二格表示分段,但在网文中是直接「空一行」表示分段,这个在CSS中的设定就是<P>的意思,而另一个<BR>是换行。

问:分段<P>,跟换行<BR>差别在哪里?
答:一般分段在CSS中会设定直接空一行,而<BR>就是单纯的换行,没有空一行。请参考:文章排版注意事项

三、文章排版必需考量在手机版中的观感

以前没有这种问题,但现在用手机浏览的用户比用台式的还多,以我的网站来说,我花了那么多的心思在版面设计上面,我还特地把所有的广告都关掉,但你看看,手机54%,台式47%。

也就是说,我自己平常也要用手机看看网站,这样才能知道大部份的用户在我看我的网站时是什么感觉,然后再调整文章的排版。

好,以上说明给您参考。

网友询问:
以面的说明我看了,但是我还是看不太出来要怎么后调整。
请问后台可以直接去除word格式吗?谢谢!

小编回复:
现在只能一个一个「纯手工」去除,并没有一个指令可以让你把所有的文章一次搞定,这也就是为什么我说,你应该直接在网站后台的编辑器优化文章即可。

而且写完后,不光是电脑版,你连手机版也要看一下,这样就算你遇到这种问题,因为一开始你就遇到了,你就可以当场调整,这样下次你在优化文章的时候就会避免这样的问题。

就不会发生现在这种事情,因为你已经写了N篇文章了,现在如果要改,等于是要一篇文章一篇文章的纯手工调整,这样会很累,但也没办法,就是「花时间」调整一下,把「分行符号」去掉。

懒人包:网站实战全系列

_______________________________

站长介绍:小编先生
:常见问题
电脑组装:找小编/组电脑

未经允许不得转载:藤条部落 » 【网站实战】304 | 电脑版正常,但用手机看文章,排版怪怪的,会出现奇怪的空白。(分行符号的关系)


深夜美绣视频
已添加在线视频资源,免费欣赏