移动端bug兼容(代码片段)

关键词：

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

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请求回来的，页面的路由跳转都在前端实现。

移动端兼容问题(代码片段)

1.华为手机自带浏览器  不支持  text-decoration:underline;解决方案：varua=navigator.userAgent.toLowerCase();if(ua.match(/huawei/==‘huawei‘))$(‘.info-linka‘).css(‘border-bottom‘,‘1pxsolid‘); &n 查看详情

移动端bug汇总(代码片段)

...是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以避免所以问题： 查看详情

pc端移动端兼容的大图轮播(代码片段)

body,htmlwidth:100%;*margin:0;padding:0;list-style:none;.hahalist-style-type:none;.navwidth:100%;height:300px;overflow:hidden;position:relative;.warpheight:300px;position:absolute;.warp.haha 查看详情

移动端300ms兼容问题（移动端经典问题）(代码片段)

移动端300ms延迟原因2007年初。苹果公司在发布首款iPhone前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对iPhone这种小屏幕浏览桌面端站点的问题。双击缩放(doubletaptozoom)，这... 查看详情

如何兼容移动端（安卓和ios）情况2-移动端开发注意事项(代码片段)

一、meta标签使用1、meta的使用<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>强制让文档的宽度与设 查看详情

移动端兼容小计(代码片段)

1、页面布局：由于手机型号多样导致页面高宽比非常多，在制作上会有出现不同手机在同一套css下面显示效果不尽如人意，所以需要进行兼容性处理。方式很多比如直接套用类似bootstrap类的框架，可以使用rem等相对单位。这里... 查看详情

移动端css样式兼容(代码片段)

1、1px边框问题问题：不同的浏览器对于border：1px像素显示的大小不一样解决方案：可以利用元素的伪类，来设置1px边框.parentposition:relative;height:100px;width:100px;background:yellow;.parent:aftercontent:'';position: 查看详情

移动端css样式兼容(代码片段)

1、1px边框问题问题：不同的浏览器对于border：1px像素显示的大小不一样解决方案：可以利用元素的伪类，来设置1px边框.parentposition:relative;height:100px;width:100px;background:yellow;.parent:aftercontent:'';positi 查看详情

如何兼容移动端（安卓和ios）情况1(代码片段)

一怎么判断是安卓还是ios//获取浏览器的userAgent,并转化为小写varua=navigator.userAgent.toLowerCase();//判断是否是苹果手机，是则是truevarisIos=(ua.indexOf('iphone')!=-1)||(ua.indexOf('ipad')!=-1);if( 查看详情

一个vue项目同时兼容pc和移动端(代码片段)

项目场景：vue开发的项目，既有移动端又有pc端，但是移动端和pc端展示的内容不一样，同一个组件样式也不一样，移动端展示内容比pc端少，那这个时候在一个项目种怎么做的？解决方式：路由写... 查看详情

移动端兼容宝典大全，专治各种不适(代码片段)

〝古人学问遗无力，少壮功夫老始成〞移动端兼容宝典大全，专治各种不适，你是否也曾为浏览器各种的不兼容而苦恼，尤其是IE这个牛皮癣，这篇文章可能会给你帮助哦，常码字不易，出精品更难ÿ... 查看详情

移动端开发兼容性处理整理(代码片段)

【UC浏览器】video标签脱离文档流场景：<video>标签的父元素(祖辈元素)设置transform样式后，<video>标签会脱离文档流。测试环境：UC浏览器8.7/8.6+Android2.3/4.0。Demo：http://t.cn/zj3xiyu解决方案：不使用transform属性。translate用top... 查看详情

bug篇——线上移动端跳转页面(代码片段)

一、问题描述：　　在与微信支付对接时，需要由移动端发送https的一个url给微信，目的是为了让微信给自己账号的授权，开始使用window.location.href=url进行跳转请求，在本地测试时可以正常跳转，当打包vue前端，springboot后端到云... 查看详情

移动端h5截图与原生iosandroid的兼容交互(代码片段)

 项目场景：h5移动端项目需要生成截图与原生app进行图片分享的交互问题描述：使用html2canvas 生成h5截图在androidapp截图位置偏移且偏移量随机 android截图ios截图解决方案：在IOS使用html2canvas，Android使用domtoimage1.ht... 查看详情

移动端pc端网页特效(代码片段)

文章目录移动端网页特效触屏事件classList属性常用开发插件PC端网页特效偏移量系列offset可视区系列client滚动系列scroll动画原理移动端网页特效触屏事件移动端浏览器兼容性较好，不需要考虑以前JS的兼容性问题，可以放... 查看详情

h5开发移动端遇到的bug(代码片段)

之前开发过几个移动端的项目，经常会遇到莫名其妙的bug，现在有空就一一记录下，避免下次遇到时毫无头绪。H5在ios上把某些数字变色造成的原因：safari总会把长串数字识别为电话号码，文字变成蓝色，点击还会弹出菜单添加... 查看详情

移动端滑屏全应用requestanimationframe的兼容与使用(代码片段)

首先，传统做动画的方式有以下几种：1.css的transition过度动画2.css的animation动画3.使用setTimeout或setInterval模拟动画贞（js执行机制决定了并非严格意义上的动画贞）定时器模拟动画又分为：（1）速度版运动  （2）时间版运... 查看详情

canvas实现刮刮乐，带节流效果，兼容移动端(代码片段)

CSS布局的思路，是让图片绝对定位，并设置z-index=-1，使得它能被canvas挡住。然后canvas的颜色设为透明，从而让图片显示。JS部分。对节流函数进行了一些修改。thisArg指定fn的this。节流主要是用在mousemove和touchsta... 查看详情