• 移动端遇到的问题


      1. 问题:
        z-index属性失效的问题
        其实原理也很简单,就是利用了z-index的覆盖问题,在写的过程中我发现无论怎么改变,insert的z-index总是无效的,于是百度了一下z-index无效的情况,一共有三种:

        1、父标签 position属性为relative;

        2、问题标签无position属性(不包括static);

        3、问题标签含有浮动(float)属性。

        这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了,他的解决办法有是三个:


        1、position:relative改为position:absolute;

        2、浮动元素添加position属性(如relative,absolute等);

        3、去除浮动。

        所以,去掉parent的position和z-index,达到了我想要的效果,如下图所示:

        问题1:input框在手机上ios会出现有阴影的效果,如果去掉可使用上面样式,安卓也有

      input:-webkit-autofill,select:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px white inset !important;
      }


      input {
      outline-color: invert;
      outline-style: none;
      outline- 0px;
      border: none;
      border-style: none;
      text-shadow: none;
      -webkit-appearance: none;
      -webkit-user-select: text;
      outline-color: transparent;
      box-shadow: none;
      }

      问题1:input框在手机上ios会出现有阴影的效果,如果去掉可使用上面样式,安卓也有
      问题2:input框border-radus这个样式,如果设置了值只设置两个角的值,但在ios手机它会四个角都是圆的,所以要再设置不想让其是圆角的值为0px即可





      二、读fastclick源码可以学到的东西
      1. //不支持用于模拟的touchstart事件,无法模拟
        if (typeof window.ontouchstart === 'undefined') {

        return true;

        }

        // 探测chome浏览器
        chromeVersion = +(/Chrome/([0-9]+)/.exec(navigator.userAgent) || [, 0])[1];

        if (chromeVersion) {

        //安卓设备
        if (deviceIsAndroid) {

        metaViewport = document.querySelector('meta[name=viewport]');

        if (metaViewport) {

        // 安卓下,带有 user-scalable="no" 的 meta 标签的 chrome 是会自动禁用 300ms 延迟的,无需 FastClick
        if (metaViewport.content.indexOf('user-scalable=no') !== -1) {

        return true;

        }

        //chome32以上带有 width=device-width的meta标签的也唔需要使用FastClick
        if (chromeVersion > 31 && document.documentElement.scrollWidth <= window.outerWidth) {

        return true;

        }

        }

        // 桌面设备自然无需使用
        } else {

        return true;

        }

        }

  • 相关阅读:
    PHP多条件模糊查询
    纯干货!一款APP从设计稿到切图过程全方位揭秘(转)
    0532. K-diff Pairs in an Array (M)
    0933. Number of Recent Calls (E)
    0139. Word Break (M)
    0713. Subarray Product Less Than K (M)
    0399. Evaluate Division (M)
    0495. Teemo Attacking (M)
    0179. Largest Number (M)
    0389. Find the Difference (E)
  • 原文地址:https://www.cnblogs.com/chaoyuehedy/p/9234608.html
Copyright © 2020-2023  润新知