移动端web页面遇到的问题

移动端web页面input+fixed布局bug总结

1.软键盘唤起,页面的fixed元素会失效(即无法浮动,变为absolute定值)页面超屏滚动,失效的fixed元素也会滚动

ios下, .header .footer{position为fixed}, 

        .main{position:absolute; overflow-y:scroll;-webkit-overflow-scrolling:touch}//内部滚动

兼容老ios,可把fixed替换absolute;ios不支持resize事件

ios下使用iScroll.js Android使用position:fixed

附:https://blog.youkuaiyun.com/ly2983068126/article/details/49306427

常见问题

1.设备会自动识别任何可能是电话号码的字符串,设置telephone=no可禁止此项功能

<meta name="format-delection" content="telephone=no">

2.快速回弹滚动 {overflow:auto; -webkit-overflow-scrolling:touch}

3.移动端清除输入框内阴影 input,textarea{border: 0; -webkit-appearance:none}

4.audio/video在ios和andriod中无法自动播放

$('html').one('touchstart',function(){audio.play()})

5.触摸元素出现半透明灰色遮罩

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

6.Date日期格式,ios兼容问题

ios支持2017/12/26 19:36:00,不支持2017-12-26019:36:00显示NaN

Var time = "2017-12-26 19:36:00"

time = time.replace(/-/g,"/)