zoukankan      html  css  js  c++  java
  • Html 移动web开发细节处理

    1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。
    备注:transparent的属性值在android下无效。


    2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现一个小问题就是,加了上面的属性后,iOS下默认还是带有圆角的,不过可以使用 border-radius属性修改。


    3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式,无需通过JS引擎,直接浏览器内核渲染),但是在android下不可乱用,很多见所未见的bug就是因为这个。


    4、-webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size,所以有必要两个都要写上。


    5、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。


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

    7、//竖屏时使用的样式

    @media all and (orientation:portrait) {
    .css{}
    }
    //横屏时使用的样式
    @media all and (orientation:landscape) { .css{} }

    8、audio和video无法自动播放的问题,微信内置浏览器已解决此问题:
    $('html').one('touchstart',function(){
    
        audio.play()
    })//必须有交互动作才会触发
    
    
    9、如果涉及较多域外链接,DNS Prefetching可以帮你做DNS预解析。
     
    10、如果你希望你的站点更多地在SNS上传播,那么Open Graph Protocol会比较适合你。

    11、当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡。

    12、视频全屏播放
    //x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://">>
    
    
    13、解决闪屏,-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;

    14、触摸事件用touch系列,不要用click替代;
     
    15、滚动条滚动时没有像ios原生那么顺滑流畅,没有回弹效果
    {overflow:auto;-webkit-overflow-scrolling:touch;}

    16、在处理IOS设备web页面的时候常常会遇到这样的问题,当我点击摸个元素时,点击区域会出现闪一下的情况。解决方法其实很简单,只需要给出现情况的元素加上下面的样式就能解决问题了。
          代码如下:-webkit-tap-highlight-color: rgba(0,0,0,0);这是ios设备特有的样式,原理是去掉ios背面的颜色。
     
    17、改变input默认提示placeholder的样式:
    ::-webkit-input-placeholder{font-size: 0.24rem;color: #545454;line-h/ight: 0.4rem}
    聚焦时不自动消失:
    input:focus::-webkit-input-placeholder{
        opacity: 0;
    }
     
    18、移除 input type="number" 时浏览器自带的上下箭头:
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
    }
     
    19、页面发短信 打电话 发邮件
  • 相关阅读:
    RHEL7使用ssm命令管理LVM
    LVM命令摘要
    Linux用户磁盘配额
    Linux磁盘分区实战案例
    通过yum升级CentOS/RHEL最小化安装
    RHEL7下PXE+FTP+Kickstart无人值守安装操作系统
    配置VSFTP服务器
    RHEL7下PXE+NFS+Kickstart无人值守安装操作系统
    RHEL7下PXE+Apache+Kickstart无人值守安装操作系统
    html5实现图片自适应手机屏幕页面的css
  • 原文地址:https://www.cnblogs.com/binmengxue/p/5663565.html
Copyright © 2011-2022 走看看