美文网首页VUE
CSS—IOS的一些兼容性问题01

CSS—IOS的一些兼容性问题01

作者: cain07 | 来源:发表于2021-07-30 21:51 被阅读0次

1. 在IOS中select下拉框会出现黑背景

-webkit-appearance:none;
background:url() no-repeat right;  /*自己添加下拉箭头*/
background-size:;

input框去阴影

-webkit-appearance:none;

2. 苹果手机滑动平缓效果

-webkit-overflow-scrolling:touch;

3.在IOS中input输入框光标会变得巨大

不要给input加高度,加padding撑开

4.ios 双击页面缩放 禁止

iOS10后Safari不再识别这个meta标签。所以得用js来hack一下:

禁用双指缩放:

document.documentElement.addEventListener('touchstart', function (event) {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
}, false);

禁用手指双击缩放:

var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
  var now = Date.now();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

5.在IOS中li按下会有阴影效果

-webkit-tap-highlight-color: transparent;

相关文章

  • css隐藏overflow:scroll出现的滚动条

    没有兼容性问题!没有兼容性问题!没有兼容性问题! 假设,list_container是需要内容滚动的,如果用css...

  • CSS—IOS的一些兼容性问题01

    1. 在IOS中select下拉框会出现黑背景 input框去阴影 2. 苹果手机滑动平缓效果 3.在IOS中in...

  • 兼容性问题

    CSS兼容性问题PC页面布局兼容JS兼容问题移动页面兼容问题 CSS兼容问题.header {_width:100...

  • 移动端的一些兼容性问题

    前言 在做移动端页面时,常常会有一些兼容性问题,这里是碰到的2个IOS的兼容性问题 1、IOS11表单输入光标错位...

  • 兼容性问题总结

    兼容性问题: 一、CSS兼容性 1.felx布局在iOS8上有问题。解决:加-webkit前缀 2.ie6、7和遨...

  • CSS—IOS兼容性问题

    1. 苹果手机滑动平缓效果 2. 在IOS中select下拉框会出现黑背景 在IOS中,select下拉框会出现黑...

  • 浏览器兼容性问题及解决方案(JS部分)

    关于浏览器兼容性问题的姊妹篇《浏览器兼容性问题及解决方案(CSS部分)》请点击这里。 常见的JS兼容性部分的问题有...

  • js脚本化

    读写CSS属性 dom.style.prop 读写行间兼容样式,没有兼容性问题,碰到float这样的的保留字属性,...

  • 浏览器兼容性问题

    样式兼容性问题(css):可以重置全局样式(自己手写reset.css)也可以使用 Normalize.cssie...

  • 4个技巧避免不必要的浏览器兼容性问题

    浏览器兼容性问题着实让人头疼,从最初的IE6浏览器到现在HTML5+CSS3的兴起,依然会存在兼容性问题,这里分享...

网友评论

    本文标题:CSS—IOS的一些兼容性问题01

    本文链接:https://www.haomeiwen.com/subject/ymgcvltx.html