总结一下目前的移动端开发遇到的问题.
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 请求回来的, 页面的路由跳转都在前端实现.
来源: http://www.bubuko.com/infodetail-2567311.html