web移动开发问题录

做移动开发已有2个月，来总结下一些常见问题

• meta

  <!-- 加上这个meta标签，可以让网页宽度自适应手机屏幕宽度
  width=device-width：宽度是设备屏幕宽度
  initial-scale=1：初始缩放比例1.0
  maximum-scale=1: 最小缩放比例
  user-scalable=no：不允许用户点击屏幕放大浏览
  -->
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

• css

  /* 禁止用户选择文本 */
  -webkit-user-select:none
  
  
  /* 去掉阴影 */
  -webkit-appearance:none
  
  
  /* box-sizing 告诉浏览器去理解你设置的边框和内边距的值是包含在width和height内的，这样即使设置width=100% 也不会出现横向滚动条*/
  element {
     width: 100%;
     padding-left: 10px;
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     border: 1px solid blue;
  }
  
  
  
  /* ios & android 局部滚动隐藏原生滚动条 */
  /* android */
  ::-webkit-scrollbar{
      opacity: 0;
  }
  /* ios */
  .wrap{
      height: 100px;
      overflow: hidden;
  }
  .box{
      width: 100%;
      height: -webkit-calc(100% + 5px);
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
  }
  <div class="wrap">
      <div class="box"></div>
  </div>
  
  
  
  /* 设置placeholder，focus时文字没有隐藏 */
  input:focus::-webkit-input-placeholder{
      opacity: 0;
  }
  
  

• background-image 和 image的加载区别
  

  background-image 会等到网页结构加载完成后才开始加载，不影响浏览网页的内容；而用img的话，网页会先加载img的内容，再加载背景图background-image，假设你引入一个很大size的图片，在该图片下载完之前，img后的内容不显示

---

• 参考资料
  https://developer.mozilla.org/zh-CN/docs/Web/CSS
  http://www.alloyteam.com/2015/06/yi-dong-web-wen-ti-xiao-jie/

  原创文章转载请注明：
  http://blog.csdn.net/yujuan_mao