Web--移动端知识小记

2021-10-23 15:01:10 阅读：165 来源： 互联网

标签：Web none .- -- image webkit input border 小记

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

2.-webkit-backface-visibility:hidden;
3.-webkit-transform-style:preserve-3d
解决闪屏
 

4.-webkit-user-select: none; 
禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整
 

5.-webkit-appearance: none;
消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 
不同type的input使用这个属性之后表现不一。text、button无样式，radio、checkbox直接消失
 

6.-webkit-text-size-adjust: none; 
禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)，此属性也不继承，一般加在body上规定整个body的文字都不会自动调整 
 

7.-webkit-touch-callout:none; 
禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加
 

8.-webkit-overflow-scrolling:touch；
局部滚动(仅iOS 5以上支持) 
 
 
 
9、在手机端如果1px线条仍然显示过粗，可以使用css新属性border-image边框图像来解决
     例：border-image: url(../img/line-img1.png) 2 0 round;
     关于border-image熟悉的介绍：http://www.w3cplus.com/content/css3-border-image


10、在部分安卓机上使用border-image后，发现内容区域设置 :active 后不起作用。
     原因：border-image 后面默认加了fill关键字
     解决办法：使用的边框图片，图片中间区域背景一定要是透明的。
部分安卓机对键盘事件不兼容，如果是对输入框内容监听变化可用input事件
 

11、部分iphone上，页面内如果有position:fixed固定内容，第一次滑动页面时，固定内容会随页面滑动，松开手后，内容回到原位。bug原因和覆盖范围未知。
      解决办法：用js控制固定内容第一次滑动时的的top值


12、防止按钮点击时 背景闪烁
      html{
          -webkit-tap-highlight-color: transparent;
      }


13、设置input的placeholder内容样式的方法
    input::-webkit-input-placeholder{
        color:#999;
        font-size: 14px;
    }


14、兼容iOS伪类 :active   需要给 document 绑定 touchstart 或 touchend 事件
    document.addEventListener('touchstart',function(){},false);


15、消除 IE10 里 input输入框右侧的叉号
      input:-ms-clear{ display:none; }


16、 禁止用户选中文字
     -webkit-user-select:none

标签：Web,none,.-,--,image,webkit,input,border,小记
来源： https://www.cnblogs.com/bearSky/p/15443185.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Web--移动端知识小记