近期遇到的几个布局兼容性汇总

(实时更新)

flex 可伸缩元素比例不正确(Android 4.0 - 4.3,iOS 低版本)

使用 flex 布局,在现阶段已经是非常靠谱的方案了,因为 flex 布局已经在大多数主流浏览器中兼容。但是,flex 布局还是有不少需要注意的兼容问题。

在 Android 4.0 - 4.3 和部分低版本 iOS 中,可伸缩元素(大小按比例缩放的元素)如果要确保比例正确,必须设置:

xxx {
    width: 0px;
}

其中,width,一般设置为 width: 0 或 1px、0.001% 等。

如果不设置,那么一旦 flex 的子元素的实际内容超过了按照伸缩比例应该拥有的宽度,在这些有 bug 的系统中就会出问题,具体表现是**子元素的宽度将根据实际宽度进行延伸,最多可以占据整个屏幕的宽度(即使它的 flex 布局的父元素设置了宽度,它自身仍然可以撑开以达到整个屏幕的宽度)。

Javascript 中的 undefined 与 未定义(not defined)

在 Javascript 中,有一种致命错误非常常见,即 ReferenceError:xxx is not defined. 但是,有时候当一个值从未被赋值的时候,并不会出错,而是返回 undefined,有必要对这两者进行梳理。

undefined

undefined 表达的含义有三种情况:

  1. 这个变量存在,但是并没有给予任何值。
  2. 一种普通的数据类型和一种值。你可以手工将任何变量赋值为 undefined,此时其没有特别含义。
  3. 一个存在的对象中的一个不存在(没有声明)的值,会被认为是 undefined。

对这三种情况进行归纳,undefined 可以如下总结:

  • 它是一种数据类型,也是一种值。
  • 有这种值的时候,要么它本身被赋值,要么本身存在,要么其所在对象存在。完全不存在的变量不会是 undefined(注意,此处还有坑,往后看)。
    下面举几个例子。

一个声明但没有赋值的变量为 undefined

    var p;
    alert(p); // undefined

一个不存在的对象成员为 undefined

    var p = { };
    alert(p.a); // undefined

如果 p 还有一个成员 b,其值被手工赋值为 undefined,如何区分不存在的成员 a 和存在的成员 b?可以使用 Object.prototype.HasOwnProperty() 方法。

一个手工赋值的 undefined

    var p = 5;
    p = undefined;
    alert(p); // undefined

从上面的三个例子可以清楚看出 undefined 的一些情况。undefined 的优点在于正常使用有此值的变量不会抛出异常。

未定义(not defined)

一个 未定义 (not defined) 的变量是完全没有任何声明的变量。这样的变量在使用时会直接抛出致命错误。但是,如果使用 typeof 来判断这样的变量,不但不会出错,而且竟然会返回 undefined,这使得无法使用 typeof 来区分这两种情况。

iPhone 手机QQ 4.7.2 版本网络状态泄露用户隐私

iPhone 手机QQ 4.7.2 版本会在用户的在线状态旁边增加一行小字,「2G」,「3G」,「4G」,或「WiFi」。我目前没有找到关闭这项功能的方法。而这项内容其实是严重泄漏了用户的隐私信息的。

对于很多生活就是三点一线甚至两点一线的人来说,其所在区域的网络状态(2G、3G、WiFi)可以轻易让人确定其方位。尤其是,如果再加上电脑在线的状态,这四种状态很可能可以大体推断用户所在位置。

例如对于学生党而言:

2G:可能在旅游或火车上。
3G、4G:可能在课堂或市区。
WiFi:很可能在寝室或图书馆。

腾讯没有给出取消状态显示的方式,对于用户隐私考虑绝对是不周全的。

宋卿体育馆与六一惨案

在武汉大学文理学部第四教学楼前树立着一个六一亭,纪念着当年六一惨案中的遇难者。一九四七年六月一日黎明,国民党军警几千人武装包围了武汉大学校园。肆意搜捕进步师生陈如丰、王志德、黄鸣岚三人,并当场惨遭枪杀,造成震惊全国的“六一”惨案。

机枪扫射,军警包围,珞珈山竟成屠场,请看遍地鲜血,四项诺言何去?
四海同胞,人神共愤,清华园遥祭英魂,谨献一瓣心血,亿万青年继后来。
(摘自清华学生自治会的挽联)

同年8月,武汉大学进步师生在校内修建“六·一”惨案纪念亭。亭坐北朝南,边高6.5米,六角地尖顶,翠瓦飞檐,有6根朱漆圆柱支柱。在六一亭上写有纪念的碑文。

其不远处的桂园有一个著名的宋卿体育馆。宋卿体育馆用了「民国大总统」黎元洪的字「宋卿」作为名称,是因为其资金来源于黎元洪之子的捐赠。

然而之前我不知道的是,六一惨案的纪念仪式就是在距离其不远的宋卿体育馆举行的。

我也不知道的是,在黎元洪当年筹备十万大洋捐建武汉大学体育馆的时候,其是为了满足自己的一个心愿:能够让自己死后葬在风景如画的珞珈山南麓。黎元洪希望自己的捐赠能让武大置换给自己一块陵墓的位置。为了得葬于此地,黎元洪曾表示愿意向武大捐献一笔资金,不过被当时的武汉大学拒绝了,老武大前辈们当年的风骨可见一斑。

黎元洪早年曾想在武昌创办江汉大学,并筹款银洋10万元购买了当时的中兴煤矿股票1000股,以备日后作办学基金。黎元洪病逝后其子将股票折换成10万现大洋,并在1934年去信给武大称:

系于先君遗志,不敢辄忘,……拟将此项基金转移贵校,用以培植人才,藉了先君心愿。

武大派人到天津过户并同黎子约定这笔资金用来建设宋卿体育馆。

Nginx 无法处理软链接作为网站主目录的情况

近日我将本站点的服务器从北京迁移到了广州。在迁移的过程中,我发现 Nginx 无法处理软链接作为网站主目录的情况。

例如,我在 Dropbox 备份了服务器的网站主目录,位置在 /root/Dropbox/var/www.

我使用这条命令为其创建一个软链接:

ln -s /root/Dropbox/var/www /var/www

修改目录和软链接的所有者以便 nginx 可以读取和执行:

chown -h www-data:www-data /var/www

chown -R www-data:www-data /root/Dropbox/var/www

然后,修改 nginx 配置文件中 sites-enabled 的网站,把其配置中的主目录设定为 /var/www

随后运行,发现 nginx 报告 500 错误,查看 nginx 日志 /var/log/nginx/error.log,发现其中有这样的话:

13: Permision Denied

经过仔细检查,我认定无论如何设置权限, nginx 都无法处理软链作为主目录的情况。

1 2 3 4 64