web常用知识

Html

• 打电话

  <a href="tel:0755-10086">打电话给:0755-10086</a>
  

• 发短信

  <a href="sms:10086">发短信给: 10086</a>
  

• 发邮件

  <a href="mailto:邮箱名">邮箱名</a>
  

• IOS下，取消input在输入的时候英文首字母的默认大写的情况

  <input autocapitalize="off" autocorrect="off" />
  

• 取消微信浏览器缓存

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  

Css

Ios兼容性

• 去掉IOS下点击时的灰色半透明背景

  -webkit-tap-highlight-color: rgba(0,0,0,0);
  

• 禁止IOS调整字体大小

  body { 
      -webkit-text-size-adjust: 100% !important;
  }
  

• webkit下的placeholder文字颜色修改

  -webkit-input-placeholder
  

• 阻止IOS长按时的系统菜单

  // 全局*使用，会导致输入框表单在Ios中无法进行字符键入
  -webkit-touch-callout: none
  

• IOS下CSS滚动不流畅

  // 对于局部滚动，ios8以上，不加此效果，滚动的超级慢，ios8一下，不加此效果，滚动还算比较流畅
  
  // 对于body滚动，ios8以上，不加此效果同样拥有弹性滚动效果
  
  -webkit-overflow-scrolling: touch;
  

Android兼容性

• 去除Android的语音输入按钮

  input::-webkit-input-speech-button {
      display: none;
  }
  

• 隐藏特定Android机型的灰色滚动条线

  ::-webkit-scrollbar {
      opacity: 0;
      width: 0;
      height: 0;
      background: rgba(0,0,0,0);
  }
  

• Android局部滚动时隐藏原生滚动条

  ::-webkit-scrollbar{
      opacity: 0;
  }
  

通用兼容性

• webkit默认表单样式去除

  -webkit-appearance:none
  

• 禁止长按时下载图片

  -webkit-touch-callout: none
  

• 禁用radio和checkbox默认样式

  input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}
  

• 禁止winphone默认触摸事件

  -ms-touch-action: none
  

• 禁止用户选中文字

  css方法：-前缀-user-select:none;
  
  js方法：onselectstart='return false';
  

• 设置了placeholder文字，focus时文字没有隐藏

  input:focus::-webkit-input-placeholder{
      opacity: 0;
  }
  

• -webkit-filter: grayscale(100%) 在retina下模糊

  -webkit-filter: grayscale(100%);
  

• css3-translateY移动抖动

  将单位从百分比单位改成px
  

• 动画过程有闪烁

  // 通常发生在动画开始的时候
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  

• 当CSS中定义中文font-size小于12px的时候，浏览器仍然使用12px时

  // 放在body上会导致页面缩放失效，建议不要定义成可继承的或全局的
  -webkit-text-size-adjust：none
  

相关知识

• 单行文字省略

  .txt-omit {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  

• 多行文字省略

  .txt-omit2{
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 行数
      -webkit-box-orient: vertical;
  }
  

• 文字换行

  word-break:break-all        [怎样进行单词断句]
  word-warp:break-word   	    [是否允许在单词内断句]
  overflow-wrap:break-word    [css3用来代替word-warp的，兼容性不够]
  

• word-break和word-warp区别

  word-break				——keep-all兼容性不够，效果上等同normal
                          ——简单粗暴，直接在一行内断行，不管是否前面是否有英文单词
  
  word-warp	 			——无兼容性问题，放心使用；
                          ——如果一行中存在英文单词，会将其后"长单词"移到下一行
  
  word-break				——存在非官方的break-word属性，只有苹果和谷歌等webkit游览器支持
  
  word-break :break-all	——免疫中文逗号对"长单词"的自动断行，word-warp:break-word不行
  
  ———————————————————————————
  word-break:break-word和word-warp:break-word效果等同
  推荐使用[word-break:break-all]，不存在任何问题
  

• disabled和readonly的区别

  disabled：会使文本框变灰，而且通过request.getParameter("name")得不到文本框中内容（如果有的话）
  
  readonly：只是使文本框不能输入，外观没有变化，而且通过request.getParameter("name")可以得到内容
  

• Flex布局

  • 布局定义

    .box{
        display: -webkit-flex; /*webkit*/
        display: flex;
    }
    
    /*行内flex*/
    .box{
        display: -webkit-inline-flex; /*webkit*/
        display:inline-flex;
    }
    

  • 容器样式

    .box{
        flex-direction: row | row-reverse | column | column-reverse;
        /*主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上*/
    
        flex-wrap: nowrap | wrap | wrap-reverse;
        /*换行：不换行（默认） | 换行 | 换行并第一行在下方*/
    
        flex-flow: <flex-direction> || <flex-wrap>;
        /*主轴方向和换行简写*/
    
        justify-content: flex-start | flex-end | center | space-between | space-around;
        /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
    
        align-items: flex-start | flex-end | center | baseline | stretch;
        /*交叉轴对齐方式：顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满（默认）*/
    
        align-content: flex-start | flex-end | center | space-between | space-around | stretch;
        /*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 对齐两侧均分间距 | 对齐铺满*/
    }
    

  • 子元素样式

    .item{
        order: <integer>;
        /*排序：数值越小，越排前，默认为0*/
    
        flex-grow: <number>; /* default 0 */
        /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/
    
        flex-shrink: <number>; /* default 1 */
        /*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/
    
        flex-basis: <length> | auto; /* default auto */
        /*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/
    
        flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
        /*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/
    
        align-self: auto | flex-start | flex-end | center | baseline | stretch;
        /*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/
    }
    

JavaScript

移动端经验

• 移动端横竖屏检测

  orientationchange-事件
  window.orientation-旋转角度
  90-右旋
  -90-左旋
  

• 企业微信端无法触发IOS自动播放

  WeixinJSBridge.invoke('showItemMenus',{},function(res){
      audio.play()
  })
  

• 微信内关闭页面方法

  WeixinJSBridge.invoke('closeWindow');
  WeixinJSBridge.call('closeWindow');
  

• 微信页面调整字体大小的问题

  /**
  * 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小
  * 但是会有一个1秒左右的延迟，期间可以考虑通过loading展示
  * 仅供参考
  */
  (function(){
      if (typeof(WeixinJSBridge) == "undefined") {
          document.addEventListener("WeixinJSBridgeReady", function (e) {
              setTimeout(function(){
                  WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                      alert(JSON.stringify(res));
                  });
              },0);
          });
      } else {
          setTimeout(function(){
              WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                  alert(JSON.stringify(res));
              });
          },0);
      }
  })();
  

相关知识

• == 和 === 的区别

  1.对于string,number等基础类型，==和===是有区别的
  
      a.不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等
  
      b.同类型比较，直接进行“值”比较，两者结果一样
  
  2.对于Array,Object等高级类型，==和===是没有区别的
  
      a.进行“指针地址”比较
  
  3.基础类型与高级类型，==和===是有区别的
  
      a.对于==，将高级转化为基础类型，进行“值”比较
  
      b.因为类型不同，===结果为false
  

• undefined与null的区别

  ——涵义上：
  
      1.null为空对象指针，undefined为未声明对象
      
      2.null表示"无"的对象（转为数值时为0），undefined表示"无"的初始值（转为数值时为NaN）
      
      3.null表示"没有对象"，即此处不应该有值；undefined表示"缺少值"，即此处应该有一个值，但是还没有定义
      
      4.undefined值是派生自null值，因此ECMA-262规定对它们的相等性测试要返回true
  
  ——用法上：
  
      [null]
  
          1.作为函数的参数，表示该函数的参数不是对象
          
          2.作为对象原型链的终点
          
      [undefined]
  
          1.变量被声明了，但没有赋值时，就等于undefined
          
          2.调用函数时，应该提供的参数没有提供，该参数等于undefined
          
          3.对象没有赋值的属性，该属性的值为undefined
  

• mouseover与mouseenter的区别

  不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件
  
  只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件
  

• mouseout与mouseleave的区别

  不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件
  
  只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件
  

• 根据坐标获取元素

  element.elementFromPoint(x, y);