1、Android中元素被点击时产生的边框:
* { -webkit-tap-highlight-color: rgba(250,250,250,0); /*更改点击事件的焦点色*/}
2、去除移动端输入框内阴影:
input, textarea { border: 0; /* 方法1 */ -webkit-appearance: none; /* 方法2 */ } |
3、禁止文字选中内容:
.div { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all (移动端不需要) */ -ms-user-select: none; /* IE 10+ */ } |
4、解决在移动端1px显示2px视觉效果:
.scale{ position: relative; } .scale:after{ content:""; position: absolute; bottom:0px; left:0px; right:0px; border-bottom:1px solid #adadad; -webkit-transform:scaleY(.5); -webkit-transform-origin:0 0; } |
retina屏1px问题
原因:
设备像素比(device pixel ratio,简称dpr) = 物理像素 / 设备独立像素;
css中的1px,也就是设备独立像素,并不等于移动设备的1px(物理像素),这些由于不同的手机有不同的设备像素比。
解决方案:
1)通过viewport + REM的方式来兼容。
目前这种兼容方案相对比较完美,适合新项目(老项目改用REM单位成本会比较高)。淘宝M首页就是这种方案。
在devicePixelRatio = 2 时,输出viewport
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio = 3 时,输出viewport
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-
scale=0.3333333333333333, user-scalable=no">
5、苹果得微信页面有一串数字的话,这个数字会加上a标签:
<meta name="format-detection" content="telephone=no" />
6、图片在线压缩:
http://www.tuhaokuai.com/image
7、获取URL上的参数
/** * 方法说明:获取URL上的参数 * 创建时间:2014-06-19 YYF * @param name * @returns */ function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) return unescape(r[2]); return null; //返回参数值 } |
8、css3垂直居中:
display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; |
9、进入微信公众号页面地址:
https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIyUwMjQ4OA==#wechat_redirect
10、去除textarea默认样式 :
outline:none;resize:none;
11、input placeholder更换字体颜色:
::-webkit-input-placeholder{color:#f00;}
12、css3 animation动画加多个:
#demo { /* 指定动画名称 */ animation-name: animation1, animation2; /* 指定动画时长 */ animation-duration: 2s 1s; } |
13、隐藏微信右上角分享按钮:
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener("WeixinJSBridgeReady", function () { // 通过下面这个API隐藏右上角按钮 WeixinJSBridge.call('hideOptionMenu'); }, false); |
14、如果在微信页面右上角隐藏了分享按钮,跳转新的页面都不能分享了,新的页面必须重新打开微信的分享按钮:
function onBridgeReady(){ WeixinJSBridge.call('showOptionMenu'); } if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); } }else{ onBridgeReady(); } |
上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。