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

巴特西

web常用知识

Html

Css

Ios兼容性

Android兼容性

通用兼容性

相关知识

JavaScript

移动端经验

相关知识

最新文章

热门文章