移动端常见bug（5）

最新推荐文章于 2022-01-12 18:46:59 发布

xxy77721

最新推荐文章于 2022-01-12 18:46:59 发布

阅读量384

点赞数

本文链接：https://blog.csdn.net/xxy77721/article/details/78116721

版权

1、长时间按住页面出现闪退

1

2

3

 
         element { 
        
         -webkit-touch-callout:  
         none 
         ; 
        
         }

2、iphone及ipad下输入框默认内阴影

1

2

3

 
         Element{ 
        
         -webkit-appearance:  
         none 
         ;  
        
         }

3、ios和android下触摸元素时出现半透明灰色遮罩

1

2

3

 
         Element { 
        
 
            
         -webkit-tap-highlight- 
         color 
         :rgba( 
         255 
         , 
         255 
         , 
         255 
         , 
         0 
         ) 
        
 
         } 
        

设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。

后面一篇文章有详细介绍，地址：http://www.jb51.net/post/phone_web_ysk

4、active兼容处理即伪类 :active 失效

方法一：body添加ontouchstart

1	`<` `body` `ontouchstart` `=` `""` `>`

方法二：js给 document 绑定 touchstart 或 touchend 事件

 
         <style> 
        
         a { 
        
         color: 
          #000; 
        
         } 
        
         a:active { 
        
         color: 
          #fff; 
        
         } 
        
         </style> 
        
         <a herf=foo >bar</a> 
        
         <script> 
        
         document.addEventListener( 
         'touchstart' 
         , 
         function 
         (){}, 
         false 
         ); 
        
         </script>

5、动画定义3D启用硬件加速

1

2

3

4

 
        Element { 
       
 
           
        -webkit-transform:translate 
        3 
        d( 
        0 
        ,  
        0 
        ,  
        0 
        ) 
       
 
           
        transform: translate 
        3 
        d( 
        0 
        ,  
        0 
        ,  
        0 
        ); 
       
 
        } 
       

6、format-detection

format-detection 启动或禁用自动识别页面中的电话号码。

语法：

1	`<meta name=` `"format-detection"` `content=` `"telephone=no"` `>`

说明：

默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。

7、html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。

如下：

1	`<` `a` `href` `=` `"tel:4008106999,1034"` `>400-810-6999 转 1034</` `a` `>`

拨打手机直接如下

<a href="tel:15677776767">点击拨打15677776767</a>
8、html5GPS定位功能

具体请看：http://www.jb51.net/post/html5_GPS_getCurrentPosition

9、上下拉动滚动条时卡顿、慢

1

2

3

4

 
           body { 
          
           -webkit-overflow-scrolling: touch; 
          
           overflow-scrolling: touch; 
          
           }

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

10、禁止复制、选中文本

1

2

3

4

5

6

 
           Element { 
          
           -webkit-user-select:  
           none 
           ; 
          
           -moz-user-select:  
           none 
           ; 
          
           -khtml-user-select:  
           none 
           ; 
          
           user-select:  
           none 
           ; 
          
           }