美文网首页
移动端开发踩过的坑

移动端开发踩过的坑

作者: lMadman | 来源:发表于2017-01-04 11:16 被阅读0次

1.min-height的继承问题

这不是一个h5的问题,但是也是在这次中正好遇到的。
你也许会给一个元素一个 min-height,然后你会发现他的子元素在大部分浏览器——而且是现代浏览器——却不能再继承它了。
也就是父子元素都用了min-height:100%,子元素会得不到预期的高度。
你也有很多种解决方法,比如在用min-height:100%的同时加一个 height:1px,或者用js动态的去加。
但是前者当你元素本身存在overflow:hidden的时候,会抵消到滚动条,后者有效率问题,而且会闪一下。
所以我推荐另一种方法,当你不用去顾虑低版本浏览器,比如在h5上面时。
把父元素的display设定为table,子元素的当然是设定为table-cell。 这样子元素就会自动填充满父元素,而父元素你就可以正常的用min-height了。

2.click事件,模拟器上都没问题,但是手机上就是不触发

也许是为了性能考虑吧,手机上不会去主动的监听click之类的事件,你需要在监听的dom上css,cursor:pointer

3.浏览器后退不刷新

这种情况是以前遇到的,这里也再说一下。
主要会发生在webview里多一点。当你点击后退时候,页面是以缓存形式出现的,而不是刷新后的。很多情况下这不是你预期的效果。
解决方法是用js:

window.onpageshow =function(evt){
// If persisted then it is in the page cache, force a reload of the page.
  if(evt.persisted){ 
     document.body.style.display ="none";
     location.reload();
  }
};

onpageshow每次页面加载都会触发,无论是从缓存中加载还是正常加载。这是他和onload的区别
persisted判断页面是否从缓存中读出,利用这两个属性就可以很好地完成我们的要求。

相关文章

  • 移动端开发踩过的坑

    1.min-height的继承问题 这不是一个h5的问题,但是也是在这次中正好遇到的。你也许会给一个元素一个 mi...

  • 移动端开发最近踩过的坑

    1.Meta标签: 当页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1,并且文...

  • web移动端开发踩坑

    1.响应式布局。经过开发测试,我在一些布局中使用了固定的单位px导致在微信环境中在字体放大的情况下,会出现布局错乱...

  • vant移动端 踩过的坑

    国内镜像官网:https://vant-contrib.gitee.io/vant/#/zh-CN/quickst...

  • 移动端踩的坑

    1、微信浏览器input=file,点击选择图片无法上传 我开始的input 只需要改accept 属性值就可以了...

  • 那些年移动端踩过的坑

    一、动画在ios上,页面滚动的时候,动画也会停止? 前段日子撸的一串抽奖活动的项目,里面写了个转盘的动画,用着还挺...

  • 移动端的头尾固定问题

    新起了个移动端项目,在头位固定问题上又踩了一次踩过的坑。爬起来之后弹弹土,乖乖的坐下来码字,把踩坑换来的经验教训记...

  • Blog收集

    涵月天-microzz.com 文章 移动端踩坑合集 Nginx 配置简述

  • web前端基础兼容问题

    目的: 在web移动端项目开发中,经常会遇到各种各样的兼容性问题,但是之前都缺少总结,以前踩的坑可能还会再去踩一遍...

  • flex兼容问题

    目的: 在web移动端项目开发中,经常会遇到各种各样的兼容性问题,但是之前都缺少总结,以前踩的坑可能还会再去踩一遍...

网友评论

      本文标题:移动端开发踩过的坑

      本文链接:https://www.haomeiwen.com/subject/nysovttx.html