移动设备点击时去掉外加的蓝色边框
a, input, button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
outline:none;
}
获取宽高(这里附加了适配)
window.gameWidth = window.outerWidth || window.innerWidth || screen.width
window.gameHeight = window.outerHeight || window.innerHeight || screen.height
scaleToFitX = window.gameWidth / 320
scaleToFitY = window.gameHeight / 548
window.optimalRatio = Math.min scaleToFitX, scaleToFitY
编辑placeholder
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
padding-left: 25px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
padding-left: 25px;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
padding-left: 25px;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
padding-left: 25px;
}
autocomplete='off'
elem.offsetHeight/offsetWidth;
if (element.offsetHeight < element.scrollHeight ||
element.offsetWidth < element.scrollWidth) {
// your element have overflow
} else {
// your element doesn't have overflow
}
github分支命名
- 样式修改: 'style';
- 功能添加:
feature
;
- 问题修复:
bug
;
- 其他修改:
chore
css百分比制作长宽相等
padding-top/padding-bottom:100%
设置高度为等长宽度;
移动端的点击
$('#modal-one').prop('checked', true);
英文名字缩写
图片缩放的问题
- 再用到类似七牛可以处理图片的服务,对移动端上图片返回的时候,考虑到手机的具体像素点,需要根据dpi缩放;
var width = window.screen.width || window.screen.availWidth || document.body.clientWidth;
var dpi = window.devicePixelRatio || 1;
var imgWidth = width * dpi;
body设置
body {
font-family: 'SimHei', 'STHeiti', 'Microsoft JhengHei' ;
font-size: 16px;
-webkit-touch-callout: none;
-webkit-font-smoothing: antialiased;
}
设置宽模式
box-sizing: border-box;