zoukankan      html  css  js  c++  java
  • 移动css兼容性1

    1 text-size-adjust: 100%;

      font-size<12px

      不推荐none,因为none会导致页面缩放失效

      属性是为解决移动设备上横屏问题而出现的,取消横屏切换时字号变大

      另外,桌面谷歌27以上已经不支持这个属性了,可用transform:scale(0.875)替代不过为啥一定要用<12的,12px不是很好么    

    2 :focus{

      outline:none;  

    }

    真的有需要获得焦点的元素,如果取消默认的,还是自定义一套对用户更友好

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

    4  appearance改变按钮和其他控件的外观,使其类似于原生控件。

      设置为none屏幕input的内阴影

      -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none;

    5 -webkit-touch-callout :none则禁止系统默认菜单

    6 -webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用GPU),但是在android容易引发bug。

    7 关闭IOS键盘自动大写

      input元素提供了autocapitalize属性,通过指定autocapitalize=”off”

    8 css3动画会影响自动聚焦,自动聚焦要在动画执行之前来做

    9 -webkit-font-smooting: antialiased; 这个属性可以使页面上的字体抗锯齿。默认为subpixel-antialiased | none;

      -moz-osx-font-smooting:grayscale; 这个属性也是更清晰的作用,特别是图标文字流行的今天。

    10 IOS禁止选中文字

      -webkit--user-select:none;

    11 IOS 禁止用户复制或者保存图片,   彻底禁止新窗口打开页面

      -webkit-touch-callout:none;  

    12 input type="number"去除上下箭头

      ::-webkit-inner-spin-button{-webkit-appearance:none;} outer

      input[type="number"]{--moz=appearance:textfield;}

    参考:http://www.css88.com/webkit/-webkit-appearance/

       http://blog.163.com/hsb001_mobile/blog/static/15524028020111177221254/

  • 相关阅读:
    数据结构——第二章 线性结构
    数据结构——第一章 绪论
    2018年
    Node笔记(2)
    Node笔记(1)
    公务员考试
    cf-789A (思维)
    cf188C(最大子段和&&思维)
    zzuli1731 矩阵(容斥)
    九余数定理(同余定理)
  • 原文地址:https://www.cnblogs.com/jingwensophie/p/4742867.html
Copyright © 2011-2022 走看看