打电话, 发短信和发邮件
- <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 下点击时的灰色半透明背景
- webkit - tap - highlight - color: rgba(0, 0, 0, 0)
禁止 IOS 调整字体大小
body{-webkit-text-size-adjust: 100% !important}
当在 css 中定义的中文 font-size 小于 12px 的时候, 浏览器仍然使用 12px 时可是有 (放在 body 上会导致页面缩放失效, 建议不要定义成可继承的或全局的)
- webkit - text - size - adjust:none
webkit 默认表单样式去除
- webkit - appearance: none
禁用 radio 和 checkbox 默认样式
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}
webkit 下的 placeholder 文字颜色修改, IOS 可以, android 不行
- webkit - input - placeholder
设置了 placeholder 的文字, 在 focus 时文字没有隐藏
input:focus::-webkit-input-placeholder{opacity: 0;}
阻止 ios 长按时的系统菜单, 阻止 ios 和 android 长按时下载图片 (全局 * 使用会导致输入框表单在 IOS 中无法进行字符键入)
- webkit - touch - callout: none
禁止 winphone 默认触摸事件
- ms - touch - action: none
禁止用户选中文字
- 前缀 - user-select:none
onselectstart='return false';
去除 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;}
单行文字省略
- .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 -
breakkeep - 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], 不存在任何问题
input 属性 disabled 和 readonly 的区别
disabled 会使文本框变灰, 而且通过 request.getParameter("name") 得不到文本框中内容 (如果有的话)
readonly 只是使文本框不能输入, 外观没有变化, 而且通过 request.getParameter("name") 可以得到内容
动画过程有闪烁 (通常发生在动画开始的时候)
- -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;
ios-css 滚动不流畅解决方案
-webkit-overflow-scrolling: touch
a. 对于局部滚动, ios8 以上, 不加此效果, 滚动的超级慢, ios8 一下, 不加此效果, 滚动还算比较流畅
b. 对于 body 滚动, ios8 以上, 不加此效果同样拥有弹性滚动效果
-webkit-filter: grayscale(100%) 在 retina 下模糊
- webkit - filter: grayscale(100 % );
css3-translateY 移动抖动
将单位从百分比单位改成 px
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. 对于 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 事件
移动端横竖屏检测
orientationchange - 事件
window.orientation - 旋转角度
90 - 右旋
-90 - 左旋
根据坐标获取元素
element.elementFromPoint(x, y)
audio 元素和 video 元素在 ios 和 andriod 中无法自动播放
- $('html').one('touchstart',function(){
- audio.play()
- })
企业微信端无法触发 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);
- }
- })();
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;
- }
来源: http://www.jianshu.com/p/99c5214953a9