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();
}

移动端bug之解决方式的更多相关文章

  1. Android之——常见Bug及其解决方式

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46942139 1.android.view.WindowManager$BadTo ...

  2. 移动端1px像素解决方式,从1px像素问题剖析像素及viewport

    在移动端web开发过程中,如果你对边框设置border:1px,会发现,边框在某些手机机型上面显示的1px比实际感觉会变粗,这也就是1像素问题.如下图是对桌面浏览器和移动端border设置1px的比较 ...

  3. 怎样用C#代码管理SharePoint解决方式

    怎样用C#代码管理SharePoint解决方式         本文我们将了解怎样用代码管理SharePoint解决方式.我们使用server端对象模型抽取解决方式.         SharePoi ...

  4. 移动端html5页面长按实现高亮全选文本内容的兼容解决方式

    近期须要给html5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统"复制"菜单.用户能够点击"复制"进行复制操作.然后粘贴到App ...

  5. 记录一个前端bug的解决过程

    人在江湖飘,哪能不挨刀. 我挨了重重一bug.严格来讲这可能是我职业生涯以来的首个悲惨经历,因为凭我的知识储备和经验,基本上任何可重现的bug都是可解的.然而这个bug却困扰了我三个月之久,它具有以下 ...

  6. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  7. Arduino下LCD1602综合探究(下)——如何减少1602的连线,LiquidCrystal库,LiquidCrystal库中bug的解决方法

    一.前言: 上文中,笔者系统的阐述了1602的两种驱动方式,并简单的提到了Arduino的LiquidCrystal库.本文紧接上文,对以下两个问题进行更加深入的探讨:如何能够使1602对Arduin ...

  8. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  9. get传递中文产生乱码的解决方式汇总

    1 最基本的乱码问题. 这个乱码问题是最简单的乱码问题.一般新会出现.就是页面编码不一致导致的乱码. <%@ page language="java" pageEncodin ...

随机推荐

  1. 运维不得不知的 Linux 性能监控、测试、优化工具

    Linux 平台上的性能工具有很多,眼花缭乱,长期的摸索和经验发现最好用的还是那些久经考验的.简单的小工具.系统性能专家 Brendan D. Gregg 在 LinuxCon NA 2014 大会上 ...

  2. 如何对hashmap按value值排序

    http://bbs.csdn.net/topics/90321713 这个帖子中没有我想要的答案,treemap是根据key排序的,想以value排序,那么可以key,value互换一下,不过这样的 ...

  3. Python入门一:简单得不能再简单了##

    从python的语法上看,简单得不能再简单了. 想学它,请移步廖雪峰python2.7教程以及python3.这实在是最好的入门教程.参考资料太多: 外国的教程 Python 入门指南 Python ...

  4. Windows下OpenCV 3.1.0 在 Qt Creator 4.0.2 (Qt 5.7.0 MinGW) 中的开发环境配置

    2017-2-23 Update: 修改并添加了部分细节 最近正在学习OpenCV ,为毕业设计做准备.Windows版本的OpenCV都默认提供对VS的支持,其在VS中的配置比较简单,网上也有大批教 ...

  5. selenium+python自动化97--unittest参数化(paramunittest)

    前言 paramunittest是unittest实现参数化的一个专门的模块,可以传入多组参数,自动生成多个用例 前面讲数据驱动的时候,用ddt可以解决多组数据传入,自动生成多个测试用例.本篇继续介绍 ...

  6. 6.requests编写企查查爬虫

    (为编写完善能拿下来数据) 企查查代码数据如下: #encoding:utf-8 import requests from lxml import etree import random import ...

  7. svn使用---在CentOS 7上搭建SVN服务器 及windows搭建svn步骤

    svn搭建方法: https://blog.csdn.net/helijie92902/article/details/51935122?foxhandler=RssReadRenderProcess ...

  8. xe DateTimePicker.Date bug

    xe6 bug xe7 ok DateTimePicker1->DateTime.DateString(); DateTimePicker1->DateTime.DateTimeStrin ...

  9. 机器学习入门-贝叶斯统计语料库的词频.groupby() collections

    1..groupby()[].agg(by={}) 2. collections.de...(lambda:1) 统计的单词是语料库中所有的词, 对Dataframe统计单词词频,同时增加一列数据co ...

  10. jdk升级到9,eclipse打不开

    jdk从1.8到1.9之后删除了不少之前Deprecated的类. eclipse 版本oxygen和neon对应jdk1.8 eclipse 版本luna和mars对应jdk1.7,1.6 在打开e ...