XFE 技术 生活 笔记 文集

web常用小知识

🔖 web前端 👀 95 🕒 2018-02-10 👨‍🎓 戡玉

Html

  1. 打电话,发短信和发邮件

    <a href="tel:0755-10086">打电话给:0755-10086</a>
    <a href="sms:10086">发短信给: 10086</a>
    <a href="mailto:邮箱名">邮箱名</a>
  2. ios下,取消input在输入的时候英文首字母的默认大写的情况

    <input autocapitalize="off" autocorrect="off" />
  3. 取消微信浏览器缓存

    <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

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

    -webkit-tap-highlight-color: rgba(0,0,0,0)
  2. 禁止IOS调整字体大小

    body{-webkit-text-size-adjust: 100% !important}
  3. 当在css中定义的中文font-size小于12px的时候,浏览器仍然使用12px时可是有(放在body上会导致页面缩放失效,建议不要定义成可继承的或全局的)

    -webkit-text-size-adjust:none
  4. webkit默认表单样式去除

    -webkit-appearance:none
  5. 禁用 radio 和 checkbox 默认样式

    input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}
  6. webkit下的placeholder文字颜色修改,IOS可以,android不行

    -webkit-input-placeholder
  7. 设置了placeholder的文字,在focus时文字没有隐藏

    input:focus::-webkit-input-placeholder{opacity: 0;}
  8. 阻止ios长按时的系统菜单,阻止ios和android长按时下载图片(全局*使用会导致输入框表单在IOS中无法进行字符键入)

    -webkit-touch-callout: none
  9. 禁止winphone默认触摸事件

    -ms-touch-action: none
  10. 禁止用户选中文字

    -前缀-user-select:none
    onselectstart='return false';
  11. 去除Android的语音输入按钮

    input::-webkit-input-speech-button {display: none;}
  12. 隐藏特定Android机型的灰色滚动条线

    ::-webkit-scrollbar{opacity: 0;width: 0;height: 0;background: rgba(0,0,0,0);}
  13. android局部滚动时隐藏原生滚动条

    ::-webkit-scrollbar{opacity: 0;}
  14. 单行文字省略

    .txt-omit {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
    }
  15. 多行文字省略

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

    word-break:break-all       [怎样进行单词断句]
    word-warp:break-word       [是否允许在单词内断句]
    overflow-wrap:break-word   [css3用来代替word-warp的,兼容性不够]
  17. 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-wordword-warp:break-word效果等同
    推荐使用[word-break:break-all],不存在任何问题
  18. input属性disabled和readonly的区别

    disabled会使文本框变灰,而且通过request.getParameter("name")得不到文本框中内容(如果有的话)
    readonly只是使文本框不能输入,外观没有变化,而且通过request.getParameter("name")可以得到内容
  19. 动画过程有闪烁(通常发生在动画开始的时候)

    -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;
  20. ios-css滚动不流畅解决方案

    -webkit-overflow-scrolling: touch
    a.对于局部滚动,ios8以上,不加此效果,滚动的超级慢,ios8一下,不加此效果,滚动还算比较流畅
    b.对于body滚动,ios8以上,不加此效果同样拥有弹性滚动效果
  21. -webkit-filter: grayscale(100%) 在retina下模糊

    -webkit-filter: grayscale(100%);
  22. css3-translateY移动抖动

    将单位从百分比单位改成px
  23. 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

  1. ==和===的区别
1.对于string,number等基础类型,==和===是有区别的

    a.不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,===如果类型不同,其结果就是不等

    b.同类型比较,直接进行“值”比较,两者结果一样

2.对于Array,Object等高级类型,==和===是没有区别的

    a.进行“指针地址”比较

3.基础类型与高级类型,==和===是有区别的

    a.对于==,将高级转化为基础类型,进行“值”比较

    b.因为类型不同,===结果为false
  1. undefined与null的区别
——涵义上:

    1.null为空对象指针,undefined为未声明对象

    2.null表示"无"的对象(转为数值时为0),undefined表示"无"的初始值(转为数值时为NaN3.null表示"没有对象",即此处不应该有值;undefined表示"缺少值",即此处应该有一个值,但是还没有定义

    4.undefined值是派生自null值,因此ECMA-262规定对它们的相等性测试要返回true

——用法上:

    [null]

        1.作为函数的参数,表示该函数的参数不是对象

        2.作为对象原型链的终点

    [undefined]

        1.变量被声明了,但没有赋值时,就等于undefined

        2.调用函数时,应该提供的参数没有提供,该参数等于undefined

        3.对象没有赋值的属性,该属性的值为undefined
  1. mouseover与mouseenter的区别

    不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件
    只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件
  2. mouseout与mouseleave的区别

    不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件
    只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件
  3. 移动端横竖屏检测

    orientationchange-事件
    window.orientation-旋转角度
    90-右旋
    -90-左旋
  4. 根据坐标获取元素

    element.elementFromPoint(x,y)
  5. audio元素和video元素在ios和andriod中无法自动播放

    $('html').one('touchstart',function(){
         audio.play()
    })
  6. 企业微信端无法触发IOS自动播放

    WeixinJSBridge.invoke('showItemMenus',{},function(res){
         audio.play()
    })
  7. 微信内关闭页面方法

    WeixinJSBridge.invoke('closeWindow');
    WeixinJSBridge.call('closeWindow');
  8. 微信页面调整字体大小的问题
    /**
    * 页面加入这段代码可使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);
     }
    })();
  9. HTML5重力感应
    if (window.DeviceMotionEvent) { 
         window.addEventListener('devicemotion',deviceMotionHandler, false);  
    } 
    var speed = 30;//speed
    var x = y = z = lastX = lastY = lastZ = 0;
    function deviceMotionHandler(eventData) {  
         var acceleration =event.accelerationIncludingGravity;
         x = acceleration.x;
         y = acceleration.y;
         z = acceleration.z;
         if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
               //简单的摇一摇触发代码
               alert(1);
        }
        lastX = x;
        lastY = y;
        lastZ = z;
    }