移动端Bug之解决方式

发表于:2018-7-31 16:18

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:刘世涛    来源:博客园

  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),我们将立即处理。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号