移动端h5 小问题

[wenJonSnow]

问题：android手机在 有输入框和定位（absolute/fixed） 时 ，每次点击输入框，弹出默认键盘，出现定位元素顶上来的情况，原因是android手机页面高度，会随着输入键盘弹出而变化。
  解决： **是  window.onresize
     if (isAndroid) {

        let client_h = document.documentElement.clientHeight;

        window.onresize = function () {

            let new_client_h = document.documentElement.clientHeight;

            if (new_client_h < client_h) {

                CustombtnBox.style.display = 'none';
            } else {
                CustombtnBox.style.display = 'flex';
            }
        }
    }
  问题：android手机软键盘弹起挡住输入框的问题，原因是android手机页面高度会随着软键盘的弹起而变化，iOS不会。
  解决：** 每次输入框获取到焦点时 判断是否是android手机， 给最外层(div或body) 重新赋值高度。(但是这个方法 会带来新的问题，就是点击软键盘下一步时，页面高度没变回来，有一部分页面就没显示)
      input.onfocus=function(){
          if(isAndroid){// 自己写 判断是否是android手机的逻辑
               let height = window.innerHeight   //获得当前页面高度 赋值给最外层(div或body)
                document.getElementById('CustomizeBuy').style.height = height + 'px';
          }
      }
  问题：页面不能滚动到顶部时
  解决：   
  const oCustomizeBuy = document.querySelector('#CustomizeBuy');
    if (oCustomizeBuy) {
        if (oCustomizeBuy.scrollTo) {
            oCustomizeBuy.scrollTo(0, 0);// 只有iOS 支持
        } else if (typeof oCustomizeBuy.scrollTop !== 'undefined') {
            oCustomizeBuy.scrollTop = 0; // 只有 安卓支持
        }
    }
  问题：在部分安卓手机，比如vivo 上 margin-right/left  无效。
  原因：和样式布局有关。
  解决：用flex 布局 display:flex;flex:1;
  
  问题：如果你的元素需要滚动一般设置成 overflow-x: scroll;（左右）或 overflow-y: scroll;（上下）；这时在iOS手机上会出现滑动不流畅的问题。
  解决：在滚动的整个元素下面加  -webkit-overflow-scrolling: touch;  
  
  问题：有时在iOS手机上点击一个元素时，这个元素默认会高亮显示。
  解决：-webkit-tap-highlight-color: transparent; 
  
  问题：在iOS手机上下（左右）滑动时，会出现默认的滚动条，如果你不需要它。一般android上不出现默认滚动条。
  解决：在滑动的整个元素上加
      ::-webkit-scrollbar {  
           display: none;    
        }
       注意：设置成 width:0;iOS上 无效
  
  问题：不想元素换行
  解决：white-space: nowrap; 
      
  问题：字多时 超出元素宽度 让多余的子用... 代替
  解决：text-overflow: ellipsis; 
   	   white-space: nowrap;    
       overflow: hidden;
       
  问题：新的oppo曲面屏   在react 里面 出现不支持onTouchStart事件的 情况
  解决：改为onClick 就行了   

iOS 移动端小问题

 1   iOS 11版本以上 有弹出层时   input 会出现 光标错位的现象 原因是 弹出层 用了   fiexd 定位。（iOS 10<= 一般没问题）
 方法是：直接改用absolute 定位。

 2  iOS 移动端 input 标签的readonly 属性  为true 时 点击 input 仍然可以 出现光标。        
 方法：最好改用disabled。
 
 3  Firefox还是提供了一些新事件 pageshow  ／pagehide 这2个事件的目标是document，但必须将其事件处理程序添加到window。

移动端iOS上下头部底部适配

一般iOS上 在头部底部设置 fixed 布局时，特别是有input输入框时容易出现上下部分顶上来或消失的情况。
方法：
   1，在input 元素 focus和blur 时 对fixed 的元素 进行 定位切换：
   focus聚集时：position：'absolute'；
   blur失去焦点时:position:'fixed'；
   top/bottom:需要适度调整；
   
   2，把整个页面分为上中下3部分，上一般为fixed的头部， 下为fixed的确认或输入框的底部，
   中为absolute，内部元素可以上下滚动，并设置top/bottom /height.
   示列代码如下
	 header, footer, main {
             display: block;
		}
	 header {
             position: fixed;
             height: 50px;
             left: 0;
             right: 0;
             top: 0;
		}
	 footer {
             position: fixed;
             height: 34px;
             left: 0;
             right: 0;
             bottom: 0;
	}	

	 main {
             /* main绝对定位，进行内部滚动 */
             position: absolute;
             top: 50px;
             bottom: 34px;
             /* 使之可以滚动 */
             overflow-y: scroll;
             /* 增加该属性，可以增加弹性 */
             -webkit-overflow-scrolling: touch;
	 }

	 main .content { /*content是主要内容部分*/
             height: 2000px;
	 }

  3，把整个页面分为上中下3部分，都为absolute的布局。建议html／body 元素设置height:100%。 
  
    上下absolute元素布局为：
        top/bottm/left：'0px';
    中部absolute的元素布局：
        height：cale(100% - 上下部分的高);/*减掉上和下高度*/
        top:上的height;
        left:0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;