问题背景

先说下问题背景吧,相信很多做移动端的朋友都遇到过这个问题,就是我们在设置某一个按钮的行高等于按钮本身高度的时候,在不容的手机下显示的效果会有不同,很多设备不能居中,这种现象在安卓机下面尤为严重

此问题不包括以下情况

  • 设置border并同时设置box-sizing:border-box的情况
  • 文字设置成12px以下的情况
  • line-height 减去 font-size 是奇数的情况
  • 使用rem作为line-height或者font-size的单位(会导致出现小数的px单位)的情况

问题原因

对于出现此问题的原因,互联网上有以下几种解释:

  • viewport设置成initial-scale=1的时候,物理像素和逻辑像素转换时候出现的误差
  • 英文字体和中文字体同行出现的时候,不同的渲染规则导致的行高不一致

解决方案

解决方法也查到很多,这里整理一下

  • 去掉viewport的设置(问题会更多,这根本不算是解决办法)。
  • 设置元素的line-height:normal;用padding撑开容器高度。
  • 字号内外边距等设置为需求大小的2倍,使用transform进行缩放。
  • 针对Android 7.0+设备:上设置 lang 属性:,同时font-family不指定英文,如 font-family: sans-serif。

    这个方法是利用了浏览器的字体fallback机制,让英文也使用中文字体来展示,blink早期的内核在fallback机制上存在问题,Android 7.0+才能ok,早期的内核下会导致英文fallback到Noto Sans Myanmar,这个字体非常丑。

  • 利用安卓不能识别小数px单位的特点。比如设置line-height:18.5px;安卓下会渲染成line-height:18px。
  • 设置display:table-cell。
    1
    2
    3
    display: table-cell;
    text-align: center;
    vertical-align: middle;

本文只是粗略的整理,并不全面,也不一定准确,另外,其中的解决方案并没有进行完全测试,如需要在生产环境中使用,请自行测试并选择

本文永久链接: https://www.mulianju.com/mobile-line-height/

HTML meta标签 http-equiv属性详解

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。
meta标签的 http-equiv 属性语法格式如下:

1
<meta http-equiv="参数" content="参数变量>

其中http-equiv属性主要有以下几种参数:

Expires(期限)

说明:可以用于设定网页的到期时间。一旦网页过期,将从服务器重新获取全部数据。
用法:

1
<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">

注意:必须使用GMT的时间格式。

Pragma(cache模式)

说明:是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出
用法:

1
<meta http-equiv="Pragma" content="no-cache">

注意:这样设定,访问者将无法脱机浏览。

Refresh(刷新)

说明:自动刷新并指向新页面。
用法:

1
<meta http-equiv="Refresh" content="5;URL=https://m.zol.com.cn/">

说明:如果网页过期,那么存盘的cookie将被删除。
用法:

1
<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Tue Mar 20 2018 14:31:40 GMT+0800 (CST); path=/">

注意:必须使用GMT的时间格式。

Window-target(显示窗口的设定)

说明:强制页面在当前窗口以独立页面显示。
用法:

1
<meta http-equiv="Window-target" content="_top">

注意:用来防止别人在框架里调用自己的页面。

content-Type(显示字符集的设定)

说明:设定页面使用的字符集。
用法:

1
<meta http-equiv="content-Type" content="text/html; charset=utf-8">

Pics-label(网页等级评定)

用法:

1
<meta http-equiv="Pics-label" contect="">  

说明:在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的。

Page_Enter、Page_Exit

设定进入页面时的特殊效果

1
<meta http-equiv="Page-Enter"    contect="revealTrans(duration=1.0,transtion=12)">

设定离开页面时的特殊效果

1
<meta http-equiv="Page-Exit"    contect="revealTrans(duration=1.0,transtion=12)">

Duration的值为网页动态过渡的时间,单位为秒。
Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。如下表:

Transition值 释义
0 盒状收缩
1 盒状放射
2 圆形收缩
3 圆形放射
4 由下往上
5 由上往下
6 从左至右
7 从右至左
8 垂直百叶窗
9 水平百叶窗
10 水平格状百叶窗
11 垂直格状百叶窗
12 随意溶解
13 从左右两端向中间展开
14 从中间向左右两端展开
15 从上下两端向中间展开
16 从中间向上下两端展开
17 从右上角向左下角展开
18 从右下角向左上角展开
19 从左上角向右下角展开
20 从左下角向右上角展开
21 水平线状展开
22 垂直线状展开
23 随机产生一种过渡方式

清除缓存(再访问这个网站要重新下载!)

1
<meta http-equiv="cache-control" content="no-cache">  

设定网页的到期时间

1
<meta http-equiv="expires" content="0">

关键字,给搜索引擎用的

1
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

页面描述

1
<meta http-equiv="description" content="This is my page">

HTML DOM httpEquiv 属性

定义

httpEquiv 属性把 content 属性连接到 HTTP 头部。

语法:

1
metaObject.httpEquiv=content-type|expires|refresh|set-cookie

实例

本例每 5 秒刷新页面

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<meta http-equiv="refresh" content="5" />
</head>
<body>

<script type="text/javascript">
x=document.getElementsByTagName("meta")[0];
document.write("Http equiv: " + x.httpEquiv);
</script>

</body>
</html>

参考资料

本文永久链接: https://www.mulianju.com/http-equiv/

HTML特殊字符大全

最常用的字符实体

显示结果 描述 实体名称 实体编号
&cent; &#162;
&pound; &pound; &#163;
&yen; &yen; &#165;
§ &sect; &#167;
&copy; 版权 &copy; &#169;
&#174; 注册商标 &reg; &#174;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
撇号&nbsp; &apos; (IE不支持) &#39;
&nbsp; 空格(推荐使用) &nbsp; &#160;
&ensp; 半角空格 &ensp; &nbsp;
&emsp; 全角空格 &emsp; &nbsp;

HTML特殊符号对照表

特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码
&Alpha; &Alpha; &#913; &Beta; &Beta; &#914;
&Gamma; &Gamma; &#915 &Delta; &Delta; &#916;
&Epsilon; &Epsilon; &amp &Zeta; &Zeta; &#918;
&Eta; &Eta; &#919; &Theta; &Theta; &#920;
&Iota; &Iota; &#921; &Kappa; &Kappa; &#922;
&Lambda; &Lambda; &a &Mu; &Mu; &#924;
&Nu; &Nu; &#925; &Xi; &Xi; &#926;
&Omicron; &Omicron; &Pi; &Pi; &#928;
&Rho; &Rho; &#929; &Sigma; &Sigma; &#931;
&Tau; &Tau; &#932; &Upsilon; &Upsilon; &#933;
&Phi; &Phi; &#934; &Chi; &Chi; &#935;
&Psi; &Psi; &#936; &Omega; &Omega; &#937;
&alpha; &alpha; &#94 &beta; &beta; &#946;
&gamma; &gamma; &#947; &delta; &delta; &#948;
&epsilon; &epsilon; &amp &zeta; &zeta; &#950;
&eta; &eta; &#951; &theta; &theta; &#952;
&iota; &iota; &#953; &kappa; &kappa; &#954;
&lambda; &lambda; &a &mu; &mu; &#956;
&nu; &nu; &#957; &xi; &xi; &#958;
&omicron; &omicron; &pi; &pi; &#960;
&rho; &rho; &#961; &sigmaf; &sigmaf; &#962;
&sigma; &sigma; &#9 &tau; &tau; &#964;
&upsilon; &upsilon; &amp &phi; &phi; &#966;
&chi; &chi; &#967; &psi; &psi; &#968;
&omega; &omega; &#969; &thetasym; &thetasym; &#977;
&upsih; &upsih; &#9 &piv; &piv; &#982;
&bull; &bull; &#8226; &hellip; &hellip; &#8230;
&prime; &prime; &#8242; &Prime; &Prime; &#8243;
&oline; &oline; &#8254; &frasl; &frasl; &#8260;
&weierp; &weierp; &#8472 &image; &image; &#8465;
&real; &real; &#8476; &trade; &trade; &#8482;
&alefsym; &alefsym; &# &larr; &larr; &#8592;
&uarr; &uarr; &#8593; &rarr; &rarr; &#8594;
&darr; &darr; &#8595; &harr; &harr; &#8596;
&crarr; &crarr; &#8629 &lArr; &lArr; &#8656;
&uArr; &uArr; &#8657; &rArr; &rArr; &#8658;
&dArr; &dArr; &#8659; &hArr; &hArr; &#8660;
&forall; &forall; &#87 &part; &part; &#8706;
&exist; &exist; &#8707; &empty; &empty; &#8709;
&nabla; &nabla; &#8711 &isin; &isin; &#8712;
&notin; &notin; &# &ni; &ni; &#8715;
&prod; &prod; &#8719 &sum; &sum; &#8722;
&minus; &minus; &#8722; &lowast; &lowast; &#8727;
&radic; &radic; &#8730 &prop; &prop; &#8733;
&infin; &infin; &#87 &ang; &ang; &#8736;
&and; &and; &#8869 &or; &or; &#8870;
&cap; &cap; &#8745; &cup; &cup; &#8746;
&int; &int; &#8747; &there4; &there4; &#8756;
&sim; &sim; &#8764; &cong; &cong; &#8773;
&asymp; &asymp; &# &ne; &ne; &#8800;
&equiv; &equiv; &# &le; &le; &#8804;
&ge; &ge; &#8805; &sub; &sub; &#8834;
&sup; &sup; &#8835; &nsub; &nsub; &#8836;
&sube; &sube; &#8838; &supe; &supe; &#8839;
&oplus; &oplus; &#8853; &otimes; &otimes; &#8855;
&perp; &perp; &#8869; &sdot; &sdot; &#8901;
&lceil; &lceil; &#8968; &rceil; &rceil; &#8969;
&lfloor; &lfloor; &#8970; &rfloor; &rfloor; &#8971;
&loz; &loz; &#9674; &spades; &spades; &#9824;
&clubs; &clubs; &#9827; &hearts; &hearts; &#9829;
&diams; &diams; &a &nbsp; &#160;
&iexcl; &iexcl; &#161 &cent; &cent; &#162;
&pound; &pound; &#163; &curren; &curren; &#164;
&yen; &yen; &#165; &brvbar; &brvbar; &#166;
&sect; &sect; &#167 &uml; &uml; &#168;
&copy; &copy; &#169; &ordf; &ordf; &#170;
&laquo; &laquo; &#1 &not; &not; &#172;
&shy; &shy; &#173; &reg; &reg; &#174;
&macr; &macr; &#175 &deg; &deg; d&#176;
&plusmn; &plusmn; &amp &sup2; &sup2; &#178;
&sup3; &sup3; &#179; &acute; &acute; &#180;
&micro; &micro; &#181;

本文永久链接: https://www.mulianju.com/html-special-character/

今天无意中在贴吧中看到一个小算法题,题目是:

  • 框里有若干鸡蛋,数量满足以下条件
  • 一个一个拿,刚好拿完
  • 两个两个拿,还剩一个
  • 三个三个拿,刚好拿完
  • 四个四个拿,还剩一个
  • 五个五个拿,还剩一个
  • 六个六个拿,还剩三个
  • 七个七个拿,刚好拿完
  • 八个八个拿,还剩一个
  • 九个九个拿,刚好拿完

求框里一共有多少鸡蛋(原题目说,计算出来的人智商不一般。。。哈哈,对程序员来说,一分钟算出来就算是慢的了吧,赶紧发个评论秀秀优越)

其实这是思路很清晰很简单的一道题,我们写个程序,挨个数,一个数字一个数字的去匹配,只要满足以上九个条件就可以了,源码如下(另外,题目的答案并不是唯一的,而且可能性几乎算是无限的):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//源码1,只取最小一个数字
var i = 1;
while (!(
i % 1 == 0
&& i % 2 == 1
&& i % 3 == 0
&& i % 4 == 1
&& i % 5 == 1
&& i % 6 == 3
&& i % 7 == 0
&& i % 8 == 1
&& i % 9 == 0
)) {
i++;
}
console.log(i);
//输出441
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//源码二,可以手动获取第几个满足条件的数字
//根据题目条件计算鸡蛋数量,函数接受一个参数,表示取第几个符合条件的数据(从小到大)
function cacu(num) {
var i = 1;
var flag = 0;
for (; flag < num; i++) {
//条件
if ( i % 1 == 0
&& i % 2 == 1
&& i % 3 == 0
&& i % 4 == 1
&& i % 5 == 1
&& i % 6 == 3
&& i % 7 == 0
&& i % 8 == 1
&& i % 9 == 0
) {
flag += 1;
}
}
// 因为循环会多执行一次,所以
return i-1;
}
console.log(cacu(1));
//输出441

本文永久链接: https://www.mulianju.com/用程序来算鸡蛋数/

获取location

获取location的方法网上有很多种了,之前也自己写过很多种,这些方法各有利弊吧,这里我自己整理一个自己最常用的。
此方法主要实现了以下两个分支功能:

  • 实时获取
  • 传入一个字符串参数的时候,返回以此字符串做为键名的值
  • 不传入任何参数的时候,返回一个json对象,包含所有search参数的键值对
  • 既然是location相关的东西,就把这个方法直接做为一个location的属性方法吧

以下是源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

location.query = function(){
var query;
if(typeof arguments[0] === 'string'){
var reg = new RegExp('[?&]' + arguments[0] + '=([^&]+)','');
query = reg.test(location.search) ? RegExp.$1 : '';
}else{
query = {};
location.search.replace('?','').split('&').forEach(function(item){
item = item.split('=');
item[0] && (query[item[0]] = item[1] || '');
})
}
return query;
}

获取cookie

获取cookie的方法其实跟获取location本质上是一样的,就是操作字符串呗,我这里就不过多描述了,把上面稍微改动一下就出来了。
另外document.cookie本身是个字符串类型的值,所以我们就没办法把这个方法跟这个东西关联起来了,就直接定义一个全局方法吧。

以下是源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function getCookie(){
var query;
if(typeof arguments[0] === 'string'){
var reg = new RegExp('\\b' + arguments[0] + '=([^;]+)','');
query = reg.test(document.cookie) ? RegExp.$1 : '';
}else{
query = {};
document.cookie.split(';').forEach(function(item){
item = item.trim().split('=');
item[0] && (query[item[0]] = item[1] || '');
})
}
return query;
}

本文永久链接: https://www.mulianju.com/获取location上的参数/

2017年最后一天工作日了,本博客搭建的第3天。随便写点什么东西,不然一拖就是一年啊~~

2017年最大收获:
我要当爸爸了~!

2017最大的遗憾:
本来两个宝宝,一个在第七周停育了。

2018最大的愿望:
希望宝妈和另外一个宝宝健健康康的。2018年5月,希望这个神奇的小生命顺利降临~

加油~

本文永久链接: https://www.mulianju.com/Last_workday_of_2017/