css/js(工作中遇到的问题)

移动设备点击时去掉外加的蓝色边框

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;
  }

• input不保存搜索记录

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);

英文名字缩写

• 去掉元音;a,e,i,o,u

图片缩放的问题

• 再用到类似七牛可以处理图片的服务，对移动端上图片返回的时候，考虑到手机的具体像素点，需要根据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;