移动js及兼容整理_兼容移动端的js函数加载-CSDN博客

本文链接：https://blog.csdn.net/cddcj/article/details/52472582

1. ios系统和某些移动端background-attachment:fixed不兼容性，没有任何效果，但可以hack一下就可以了，代码如下:（ps：想在哪个标签加背景，可以在它class后:before）

 
 body:before{ 

 
    
 content 
 : 
 '' 
 ; 

 
    
 position 
 :  
 fixed 
 ; 

 
    
 z-index 
 :  
 -1 
 ; 

 
    
 top 
 : 
 0 
 ; 

 
    
 right 
 : 
 0 
 ; 

 
    
 bottom 
 : 
 0 
 ; 

 
    
 left 
 : 
 0 
 ; 

 
    
 background 
 : 
 url 
 (path/to/image)  
 center  
 0  
 no-repeat 
 ; 

 
    
 background- 
 size 
 : cover; 

}

2. 弹层禁止底层内容滑动

 
      //弹层黑色背景 
     
      $( 
      '#videobox' 
      )[0].addEventListener( 
      "touchmove" 
      ,  
      function 
      (e){ 
     
      e.preventDefault(); 
     
      },  
      false 
      ); 
     
      $( 
      "#videobox" 
      ).on( 
      "click" 
      , 
      function 
      (e){ 
     
      //关闭弹窗的相关操作 
     
      $( 
      this 
      ).hide(); 
     
      }) 
     
      //弹层的内容 
     
      $( 
      "#videobox video" 
      ).on( 
      "click" 
      , 
      function 
      (e){ 
     
      e.stopPropagation(); 
     
      })

3. 输入框聚焦时无法弹起，被拉起的键盘挡住了

原因分析
正常情况下，输入框聚焦后会拉起系统键盘，然后页面弹起让输入框在键盘上面。但是在单页面（禁止滚动条），因为没有滚动条，在IOS7.x系统以及很多安卓机子上面会出现输入框被遮挡的bug。

解决方案
给单页面加上最小高度。通过设置最小高度，输入框聚焦后拉起键盘，页面还是可以滚动，所以就不会被遮挡了。设置最小高度碰巧又能解决另一个问题“在安卓下，输入框聚焦后页面会整体缩小”。因为为了达到更好的适配效果，我们使用了rem单位，通过控制根的字体大小来适配。这样就引起了一个问题，当输入框聚焦后键盘拉起，如果没有滚动条，页面高度变小，当高度小于宽度时，有些安卓机子会以最小的作为宽度，所以认为宽度变化了，那么根的字体大小就变化了，导致页面缩小了。

Html

1

2

3

4

`<body>`

`<div id="Jmain">`

`</div>`

`</body>`

Javascript

1

`$("html").css("min-height",document.documentElement.clientHeight);`

4. <select></select>下拉菜单时，使页面加载完菜单默认选中的值为2，除了safari不行？

解决方案：只要把attr改成prop就行了。

分析：attr()传入的是attributeName，而prop()传入的是

propertyName，我们可以将attribute理解为“特性”，property理解为“属性”从而来区分俩者的差异。

回到一开始的问题，根据W3C的表单规范 ，在selected属性（property）是一个布尔属性， 这意味着,如果这个特性（attribute）存在， 即使该特性没有对应的值，或者被设置为空字符串值，或甚至是"false"，相应的属性（property）都还是为true。 selected特性（attribute）值不会因为复选框的状态而改变，而selected属性（property）会因为复选框的状态而改变。因此，跨浏览器兼容的检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态，请使用.prop()方法。