iOS6 中的 apple-itunes-app tag
//iOS6, safari才有效
<meta
name="apple-itunes-app"
content="
app-id=myAppStoreID,
affiliate-data=myAffiliateData,
app-argument=myURL"
>
IOS判读user-agent
if (/xxxx/.test(req.headers['user-agent']))
返回的状态码
- 要团队约定;一般删除成功返回204，其他成功返回200;
css自适应
- 设置高度自适应
#one {
position: absolute;
width: 100%;
top: 0;
height: percentage(1/8);
}
#two {
position: absolute;
width: 100%;
top: percentage(1/8);
height: percentage(4/8);
}
#three {
position: absolute;
width: 100%;
top: percentage(1/8 + 4/8);
height: percentage(2/8);
}
#four {
position: absolute;
width: 100%;
top: percentage(1/8 + 4/8 + 2/8);
bottom: 0;
}
- 居中
.centered (@horizontal: 0, @vertical: 0) {
left: @horizontal;
top: @vertical;
transform: translate(-@horizontal, -@vertical);
-webkit-transform: translate(-@horizontal, -@vertical);
-ms-transform: translate(-@horizontal, - @vertical);
}
- 设置背景图片
.bgImg(@url: '0') {
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url(@url);
}
一个屏障效果
.modal {
position: fixed;
z-index: 999;
top: 0;
height: 120%;
width: 100%;
background-color: rgba(0,0,0,.5);
-webkit-animation-duration: .14s;
animation-duration: .14s;
}
常用的正则验证
一个css书页折叠效果原型
.example {
width: 0;
height: 0;
border-bottom: 100px solid black;
border-left: 100px solid red;
/*transform: skewX(18deg);*/
}
判断数字类型
isNaN(Number(id)) || isNaN(parseInt(id))
获取ip地址(nodejs)
export default function getClientIp(req) {
let ipAddress, forwardedIpsStr = req.headers['x-forwarded-for'];
forwardedIpsStr && (ipAddress = forwardedIpsStr.split(',')[0]);
!ipAddress && (ipAddress = req.connection.remoteAddress || req.socket.remoteAddress);
return ipAddress;
};
less文件中键入css文件
@import (inline) "../normalize.css";
制作linear-gradient背景
.gradient (@startColor, @endColor) {
background: linear-gradient(135deg, @startColor 50%, @endColor 50%);
background: -webkit-linear-gradient(135deg, @startColor 50% , @endColor 50%);
background: -moz-linear-gradient(135deg, @startColor 50% , @endColor 50%);
background: -ms-linear-gradient(135deg, @startColor 50% , @endColor 50%);
background: -o-linear-gradient(135deg, @startColor 50% , @endColor 50%);
background-color: @startColor;
}
判断元素是否在当前屏幕内
var body = document.body;
var win = getViewport();
var info = document.getElementById('info');
var box = document.getElementById('box');
function getViewport() {
// http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
var e = window,
a = 'inner';
if (!('innerWidth' in window)) {
a = 'client';
e = document.documentElement || body;
}
return {
width: e[a + 'Width'],
height: e[a + 'Height']
};
}
function getCurPos() {
var pos = box.getBoundingClientRect();
if (pos.top > win.height) {
info.innerText = '我在下面';
} else if (pos.bottom < 0) {
info.innerText = '我在上面';
} else if (pos.left > win.width) {
info.innerText = '我在右边';
} else if (pos.right < 0) {
info.innerText = '我在左边';
} else {
info.innerText = '我在当前屏';
}
}
window.addEventListener('scroll', getCurPos, false);
window.addEventListener('resize', function() {
win = getViewport();
getCurPos();
}, false);
去除inline-block间隙
关于透明度
*设置了opacity后，子元素会继承且不能重写;使用rgba;
调用原生混合中的webview暴露的方法时
- 注意可能上下文变化
var redirect = (typeof JavaScriptInterface === 'object') ? (function (func) {
return function () {
return func.apply(JavaScriptInterface, arguments)
}
})(JavaScriptInterface.redirectTo) : redirectTo ;
生成三角形
border-width;background: linear-gradient();
//生成环形凹角标
background: #58a;
background:
radial-gradient(circle at top left,
transparent 15px, #58a 0) top left,
radial-gradient(circle at top right,
transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right,
transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left,
transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
旋转
transform: rotate(-45deg);
transform: skewX(-45deg);