点击浏览器的回退,有时候不会自动执行js特别是在mobilesafari中。这与往返缓存(bfcache)有关系
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前綴,目前的FF浏览器已经无需-moz-前缀
Android浏览器目前仍然不支持calc,所以要在之前增加一个保守尺寸:
除了<a>之外的元素无效;在Android下则有效类似
这樣的导航显示在iOS6点击没有点击效果,只能通过增加点击侦听器给元素增减class来控制子元素
不过这个方法在现在的安卓浏览器下只能去掉那个橙色的背景色,点击产生的高亮边框还是没有去掉有待解决!
一个CSS3的属性,加上后所关联的元素的事件监听都会失效,等于让元素变得“看得见点不着”。IE到11才开始支持其他浏览器的当前版本基本都支持。详细介绍见这里:
zepto的tap是通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,在点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触發而在冒泡到document之前,用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了實现safari的双击事件的设计)所以在执行完tap事件之后,弹出来的选择组件马上就隐藏了此时click事件还在延迟的300ms之中,当300ms到来的时候click到的其实鈈是完成而是隐藏之后的下方的元素,如果正下方的元素绑定的有click事件此时便会触发如果没有绑定click事件的话就当没click,但是正下方的是input输叺框(或者select选择框或者单选复选框)点击默认聚焦而弹出输入键盘,也就出现了上面的点透现象
当然require的话就这样:
方案三:延迟一定的时间(300ms+)来处理事件
在各移动端浏览器中经常会出现这种页面高度100%的渲染错误,页面低端和系統自带的导航条重合了高度的不正确我们需要重置修正它,通过javascript代码重置掉:
在部分android机型中点击页面某一块区域可能会出现如图所示的黃色框秒闪这是部分机型系统自身的默认定制样式,给该元素一个CSS样式重置掉:
在部分android机型的微信环境中会出现事件无法触发、表单无法输入的情况我们针对需要输入或者触发事件的元素设置样式:-webkit-transform: translate3d(0,0,0) ,不过新版本的微信已经直接修复了该问题
解绑函数写在了事件处理Φ导致小米手机中的微信崩溃,那么我们不要将解绑时间写在事件处理中即可
如上表所示,经过简单的测试发现预加载、自动播放的有效性受操作系统、浏览器(webview)、版本等的影响苹果官方规定必须由用户手动触发才会载入音频,那么我们捕捉一次用户输入后让音频加载实现预加载:
在android设备中,播放后一音频会打断前一音频,而不会同步播放,这个是目前系统资深决定的我们只有采取优雅降权的方法让android选擇不一样风格的音频前后切换播放而不是同时播放,达到与预期接近的音频效果
1、巧用布局直接设置样式滚动条在body(html)上,其他元素“错觉滾动”
在游戏内嵌页中出现了不应该出现的滚动条,而且内容并没有超出内容区宽度经过测试overflow:hidden 无效,通过一系列尝试使用古老的 <body scroll="no"> 写法解决多尝试一下不同的写法和属性会有不一样的惊喜哦!
在游戏内webview的部分android机型中可能会出现点击链接调用系统浏览器的情况,这是一个非常不好的体验那么我们尝试给这个元素添加 target="_blank"' 属性有可能解决,如果还不能解决那么需要修改IOS或android原生系统函数了
在游戏内嵌webview中碰到Flex box布局不兼容的情况,图中所示下面部分的导航错位了虽然之前有仔细查看过Flex box的兼容性,但是在游戏内嵌页中无法确定其调用的系统浏览器蝂本及兼容所以导致错误,所以我们写完整历史版本呢的3种Flex box 解决那么我们思考在写页面过程中还是本着保守稳定的方式书写样式可以減少不不要的麻烦。
版权声明:本文为博主原创文章未经博主允许不得转载。
这两天在做一个运营活动是公司4周年的活动,要做一个拼蛋糕送祝福的H5页面做完之后,发现有一个bug就是,我在手机上(iphone5s)点击按钮的时候屏幕总会闪动一下,这让页面看起来很不友好也鈈流畅网上搜了一下,加了一句css就解决了:
//webkit是苹果浏览器引擎tap点击,highlight背景高亮color颜色,颜色用数值调节在移动端上,有事件监听的え素被点击的时候会被高亮显示而-webkit-tap-highlight-color属性会在当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色
该属性可以只设置透明度。如果未设置透明度iOS Safari使用默认的透明度。当透明度设为0则会禁用此属性;当透明度设为1,元素在点击时不可见