zoukankan      html  css  js  c++  java
  • mobileSite开发Tips

    1,根节点(html,body)overflow属性会遮盖fixed定位元素
    2,fixed元素点击时会弹出底部的菜单,应该是浏览器特性(safari)
    3,fixed元素使用后,在body里面使用padding-bottom以占位,如果放入其他元素中,最好也占位,避免IOS滑动特性遮盖元素
    4,inline-block可以使用float让元素保持在一条线上,无需使用vertical-align进行对齐
    5,touch事件里阻止默认可以减少卡顿,但是touchStart里面如果阻止,页面的滑动会受影响。
    6,需要交替显示的元素,最好都隐藏,根据需要显示,可以避免页面跳动
    7,页面返回统一调用histroy.back()方法就好,特殊处理进行URL判断
    8,从哪里来到哪里去,在link里加入returnUrl来进行回跳
    9,对于浮动的banner关闭时间,浏览记录可以通过localStorage进行存储
    10,如果浏览器开启无痕模式,webStroage的setItem方法会报错,需要try Catch提醒用户
    11,使用.clearfix:after {content: "";display: table;clear: both;}进行图片和文字的横向排列
    12,文字多行省略{overflow: hidden; text-overflow: ellipsis;display: -webkit-box;  -webkit-line-clamp: 2;-webkit-box-orient: vertical;-webkit-box-pack: center;}
    13,能使用background-image当背景的就不使用img标签,减少内存占用。
    14,如果需要在click事件中在绑定click事件,最好先解绑。或者换一种思路,使用trigger进行触发click事件
    15,需要计算内部宽度,可以用padding进行宽度的设置,用于布局
    16,对于图片,如果想完整放入div,需要设置display:block,否则会出现白边,因为图片默认是inline属性
    17,由于浏览器对border渲染不一致(或滑动时候会改变宽度),渲染粗细不均匀,可以使用div进行模拟border,也可以使用border-image代替
    18,对于图片显示模糊,可以使用padding进行缩小,但不能从根本上解决问题
    19,input去掉原本样式用图片代替时候,需要注意IOS里面会有黑色的背景,否则可能有黑边,设置background-color:white即可
    20,关于跳转,支付宝WAP跳转,replace替代href跳转
    21,定时器一定要记得清理,重复时会内存不释放就会卡顿
    ____________________________________
    保持更新...
  • 相关阅读:
    nginx增加lua支持
    使用nginx+lua实现web项目的灰度发布
    amoeba学习
    信号有关的内容
    Linux系统的进程相关内容
    等待类型
    孤立用户故障排除
    恢复数据库
    执行计划之Insert,update,delete
    临时表和表变量
  • 原文地址:https://www.cnblogs.com/10manongit/p/12975947.html
Copyright © 2011-2022 走看看