移动web开发中的坑

仅记录自己在开发中遇到的问题,持续更新。

  1. 当页面中有img标签时,需要特别注意src属性的设置。 工程中img标签的写法是:<img src="" />,在有的浏览器中(华为手机 Android4.2.2)页面会加载两次,造成比较诡异的错误。在stackoverflow上有类似的问题。

  2. cookie的编码问题。 如果cookie的值为中文,那么在某些手机(华为手机 Android4.2.2)会出现乱码问题;需要在设置cookie时进行一次编码,获取时解码。

  3. 注意transform、flex等比较新的css3属性的设置。 transform和-webkit-transform要一起存在;flex和-webkit-flex、-webkit-flex-box等属性也要一起存在,可以通过postcss进行设置。
    在webpack配置中,需要注意postcss的顺序:

  loader: ExtractPlugin.extract( "style", "css?minimize&-autoprefixer!postcss!sass" ) // 抽取共有的css

如果postcss放在最后,需要引入postcss-scss

  1. 尽量采用css3硬件加速。

  2. 在一些比较老的手机(如:三星Note2)中,在动画前对某元素设置了display:none,但是它还是会显示;如果一定时间的延迟后再开始动画,元素可以正常的被隐藏掉。 这可能是因为浏览器性能不足,没有进行repaint操作;可以通过3D加速尝试下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,510评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,608评论 0 26
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,788评论 0 2
  • 文/若水希言 (一) 昨天写了一篇文章,被心理专题主编姐姐推荐上了简书首页。很多简友在文章下面评论,甚至私信关心我...
    若水希言阅读 736评论 4 9
  • 第一个步骤就是粗略的分配文件夹, 第二个步骤就是在原有的基础上进行分块儿按照主题进行分类,第三个步骤是在这个文件夹...
    大海边的石头阅读 837评论 0 50