相信这个功能是很多主题的一道坎,我看到很多大型门户网站都没有支持这个功能。为什么呢?因为麻烦。最传统的做法是把主题中的各个div的宽度用百分比规定,然后他会自动填满整个屏幕。但这样做你会遇到很多麻烦,比如需要自动设置宽度的元素过多,多到我们甚至无法对每一个自动宽度的元素进行设计。此外动态变化的宽度对主题美化是个灾难,毕竟现在的网页美化还是靠图片和html5实现。图片是无法自适应动态宽度的。最后,为什么大型门户网站不支持这种功能呢?据我观察,大型门户网站网页格局大都采用区块化设计。一个页面中有N个区块,每个区块中显示不同的内容。这一点和本主题的设计方式很像。如果要自适应浏览器宽度,那么是改变每个区块的宽度呢?还是改变一行中显示区块的数量呢?出于美学的考量,通常会选择后者,因为区块尺寸的变化会造成整个网页变的很难看。但实现每一行的区块数量随着浏览器尺寸变化,就会涉及到网页结构的动态调整,这很麻烦。

为什么说麻烦呢。就拿本主题为例,wordpress主题采用php编写。php作为服务器端的语言是无法获取本地浏览器宽度的。所以在获取本地浏览器宽度这种活通常都用JS完成,因为JS实在本地运行的语言。好了,按照这个逻辑的发展就是,我们能否在本地通过JS获取浏览器尺寸然后发送给服务器让服务器通过PHP做出调整呢?也许能,也许不能,我不知道,因为我不会。

在网上我们能找到php获取JS变量的最简单的方式通常如下

<script type=text/javascript>document.write(XXX)</script> 

这样做看似能行,但结果通常不是我想要的。这里我假设XXX的值是1。

<?php 
$a = " <script type=text/javascript>document.write(XXX)</script> " 
?> 

这样得到的$a会是什么?echo出来的话会显示1,但用var_dump你会发现是一个长字节数的string格式的1。为什么?因为$a本质上是被赋值了上面代买中双引号中的字符串。所以$a的字节长度是上面js代码的长度,格式是string。只不过在输出的时候js运行了,给了结果1。这意味着$a无法作为php变量参与计算,因为参与运算时$a会被当成一段文本,是string而且不能被转化为int或者bool。哪怕在使用php格式转换时,$a也是作为储存着js代码的文本,而那一串代码是无法转换成任何int或者bool的。所以这么做的结果是只我想要的1只能通过$a显示出来,不能干其他事情。

那该怎么办?实际上上述这种最简单的方法是没辙的。要想真正做到变量的传递只能增加过程。GET方法、session方法、ajax方法、cookie方法选择适合的就行。我没有一一尝试,这次主题更新采用的是cookie方法。

逻辑很简单,网页加载的时候获取浏览器宽度等控制参数,然后查找本地储存的cookie。如果没有,把控制参数储存进cookie然后自动刷新网页,此时cookie中已经了刷新前存储的控制参数,通过php直接调取改变网页结构。如果本地已经存储了cookie,则与获取的控制参数进行对比,不同的话就存储新的参数并自动刷新。如果相同就什么都不做。

这样做的结果是我想要的,本主题在窄屏的情况下,会显示两列日志。而在浏览器宽度尺寸超过某个值后,会显示三列日志。

 想说点什么吗?

 (拖动评论框右下角可扩展评论框面积;若评论发表后未显示请耐心等待审核)

左半红印发表于2019.06.27th