移动端BUG兼容

Posted 2020-10-31 小数点就是问题

总结一下目前的移动端开发遇到的问题。

1、ios与安卓input默认样式去除。移动端总有一个默认的圆角或别的。

input[type=button],input[type=text],input[type=password]{
    -webkit-appearance:none;
    outline:none;
    border-radius:none;        
}

2、IOS后退无刷新

使用onpageshow主动触发js事件实现所需的刷新
onpageshow 事件在用户浏览网页时触发。

onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。

为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false 。

window.onpageshow=function(ev){
    alert("页面是否从浏览器缓存中加载? " + ev.persisted);
}

3、IOS-input输入框隐藏后光标还会出现闪动。

比如需要做一个opacity为0的input输入框，然后触发输入框的值改变去变化某一些的值效果，如六个格子如密码输入框之类的，
但在IOS里是无法隐藏掉光标的。
但可以使用label触发input实现,而input定位消失在界面上。

<label><input type="text"></label>

input{
    position:absolute;
    left: -99999px;
    top:0;
    width: 1px;
    height: 1px;
}    

4、浏览器后退前进问题。

一般情况下这不是一个问题，比如一些外卖软件在订单提交成功后还可以后退到支付页面，只是无法再提交了。

在多页面里，这是一个很无奈的问题，因为浏览器的控件是无法正常去操作的。

而history提供了向历史管理推送历史或替换历史的方法。

pushState、replaceState

这些方法在刷新情况下是无法触发popstate的监听的。

所以推送hash值是比较好的，因为在无刷新的情况可以触发监听。

而pushState推送与replaceState替换是不会触发刷新的当前页的，只有前进后退到这个历史管理是才会更新当前页。

所以有时会发现IOS的replaceState可以触发popstate，而安卓不会，因为IOS缓存优化原因，不会刷新前进后退的历史记录，

而安卓就会。

但现在一些浏览器也开始实现无刷新前进后退。

所以浏览器的控制前进后退操作实现起来很丑陋。

而现在单页面就比较好，因为都是以某些无刷新的方式推入历史管理而实现更加优雅的性能优化，比如hash值变化知道展示什么页面，

这样就可以在前端实现历史管理可控性，这样就可以自己有更多权限实现所需，而且性能更好。

function hash(){
            var hash = window.location.hash.substr(1);
            window.addEventListener("popstate", function () {
                   console.log(history.state);
            })
            if(hash){
                history.back();
            }
        }

总结一句，浏览器的前进后退问题是很不好解决的问题。

如果有条件，最好使用现流行单页面应用开发方式，这样可控性更多且前后端分离，而且优秀MVVM框架有很多，传统MVC开发前端后台一人搞实现太麻烦了，规范也很乱。

如SpringMVC，使用.do方法实现跳转页面，但这里有一个问题就是前进后退跳转页面.do方法会在历史管理记录里所以会在缓存里取出，那么就会再一次请求这个.do而页面

ajax的方法再没有表明缓存取的情况是直接重新请求的，那么就出现问题了，比如想实现一个后退刷新页面的方式，只能使用reload等方式，那么页面会闪动一下，因为返回时

缓存页面会直接出现，而重新页面需要时间请求加载，这样就是一个页面性能问题的，而单页面就不会，因为所有数据都ajax请求回来的，页面的路由跳转都在前端实现。