• 移动web开发经验总结


    1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。

    备注:transparent的属性值在android下无效。
    2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影。
    3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),但是在android下不可乱用,很多见所未见的bug就是因为这个。
    4、@-webkit-keyframes可以预定义很多你所想到的动画,然后通过-webkit-transition来调用。
    5、-webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size,所以有必要两个都要写上;用这个属性的时候推荐树勇cover这个值,可以自动去匹配宽和高。
    6、text-shadow多用这个属性,可以美化文字效果。
    7、border-radius、box-shadow、gradient、border-image,不解释,可以精简代码。
    8、android、ios4及以下,固定宽/高块级元素的overflow:scroll/auto失效,属于浏览器的bug,可借助第三方工具实现。
    9、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。
    10、<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">width可是宽度,initial-scale初始化缩放比例,maximum-scale允许用户缩放的最大比例,minimum-scale允许用户缩放的最小比例,user-scalable是否允许用户缩放。

    11、允许用户添加到主屏幕,并提供webapp的支持。

    12、css3动画会影响你的自动聚焦,所以自动聚焦要在动画执行之前来做,或者直接舍弃。

    13、使用media query适配不同屏幕。

    14、如果涉及较多域外链接,DNS Prefetching可以帮你做DNS预解析。

    15、如果你希望你的站点更多地在SNS上传播,那么Open Graph Protocol会比较适合你。

    16、当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡。
  • 相关阅读:
    Web——[HCTF 2018]WarmUp
    栈的设置+栈的越界问题+栈的极限大小
    栈的概念
    检测点3.1
    字节型数据和字型数据的小结
    汇编语言(王爽)学习记录_第一章
    sqli-labs less-1 --> less-4
    五角星
    STD二手图书交流平台团队博客-登陆问题的解决
    STD二手图书交流平台团队博客-界面构建
  • 原文地址:https://www.cnblogs.com/wufengjie/p/3668830.html
Copyright © 2020-2023  润新知