移动端专题 - 汇总003 - 《CSS-trip》

问题列表

问题列表

去除webkit默认的滚动条

Q: 如题
A: 解决方案：

element::-webkit-scrollbar{
　　　　display:none
　　}

ios input不能自动获取焦点

Q: 如题，希望在某个页面时可以自动让输入框获取焦点

A: 解决方案：
document.addEventListener(‘touchstart’,function(e){document.getElementById(‘focus’).focus();});不能把focus封装起来起来触发，那样也无效

备注：具体实现效果待验证，希望有时间的可以验证追加可能的问题以及补充方案

fastclick导致下拉框焦点冲突

Q: 移动端使用fastclick之后，在ios环境下，有几个连续的下拉框第一个select框突然填充了第二个下拉框的内容。

A:根本原因是Fastclick导致IOS下多个 select ，点击某一个，焦点不停变换的bug。修改源码，在onTouchStart事件内判断设备是否为IOS，再判断当前nodeName是否为select，如果是return false去阻止fastClick执行其他事件

github源码地址：fastclick.js

//line 391行
FastClick.prototype.onTouchStart = function(event) {
//在其方法中添加判断 符合ios select的时候 不返回事件
if(deviceIsIOS&&this.targetElement =="select")
this.targetElement = null
event.preventDefault();
}
//line521 或者讲源码中 有关touchEnd判断非ios或者非select的事件注释，
if (!deviceIsIOS || targetTagName !== 'select') {
                this.targetElement = null;
            event.preventDefault();
        }

实现电话，短信，邮件功能

Q: 如题：
A:解决方案：

// 一、打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
//  二、发短信，winphone系统无效
<a href="sms:10086">发短信给: 10086</a>
// 三、写邮件
<a href="mailto:863139978@qq.com">点击我发邮件</a>

横屏和竖屏的方案

css 媒体查询

@media screen and (orientation: portrait) {
    .main {
        -webkit-transform:rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        width: 100vh;
        height: 100vh;
        /*去掉overflow 微信显示正常，但是浏览器有问题，竖屏时强制横屏缩小*/
        overflow: hidden;
    }
}
@media screen and (orientation: landscape) {
    .main {
        -webkit-transform:rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
}

js实现

var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt, function() {
        var width = document.documentElement.clientWidth;
         var height =  document.documentElement.clientHeight;
          $print =  $('#print');
         if( width > height ){
            $print.width(width);
            $print.height(height);
            $print.css('top',  0 );
            $print.css('left',  0 );
            $print.css('transform' , 'none');
            $print.css('transform-origin' , '50% 50%');
         }
         else{
            $print.width(height);
            $print.height(width);
            $print.css('top',  (height-width)/2 );
            $print.css('left',  0-(height-width)/2 );
            $print.css('transform' , 'rotate(90deg)');
            $print.css('transform-origin' , '50% 50%');
         }
    }, false);

margin-top 负值，当上级dom为图片时无效

场景：仅在部分场景下会出现，不是必现的问题。
如题：代码如下：

<div class="before">
   <img src="xxx"/>
</div>  
<div class="after">
</div>

.after{
margin-top:-20px;
}
// changed css
.before{
}
.after{
  position:relative;
  margin-top:-20px;
}

首先说明下position默认值为static，上下顺序显示的，而relative则为生成相对定位的元素，相对于其正常位置进行定位。所以正常情况下，当所有的元素均为static或者relative的时候，向上的负值均可以生效，但是当一个元素为relative的时候，另一个元素默认值是static的时候，就会显示在其z空间的下一层，导致无法正常显示。修改其为relative即可。

苹果的光标不是按照文字大小，而是按照输入框大小

出现原因分析：通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的高度一样了。（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部。

解决方案，不要用line-heigh或者height，而是用padding实现行高。

.content{
  display:flex;
  .contentLeft:{
    width:100px
  }
  .contentInput{
      display:block;
    flex:1;
    padding:20px 0 ;
  }
}

ios键盘收起后，页面没有归位

描述：

输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑。

原因：固定定位的元素，在获取焦点的时候有占位，然后键盘显示；键盘收起后，输入框还是占位的，可以在失去焦点的时候加一个事件滚动到需要的位置。

<div class="list-warp">
  <div class="title"><span>投·被保险人姓名</span></div>
   <div class="content">
     <input class="content-input" 
            placeholder="请输入姓名"
            v-model="peopleList.name"
           @focus="changefocus()"
           @blur.prevent="changeBlur()"/>    </div>
 </div>

changeBlur(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(isIOS){
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop ||
                document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
          }, 200)
      }
    }

备注：这个生效的原理是高级的ios版本，键盘的收起会引起输入框的失去焦点事件。

安卓弹出的键盘遮盖文本框

安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子

解决办法：给input和textarea标签添加focus事件，如下，先判断是不是安卓手机下的操作，当然，可以不用判断机型，Document 对象属性和方法，setTimeout延时0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了

    changefocus(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
      if(isAndroid){
        setTimeout(function() {
         document.activeElement.scrollIntoViewIfNeeded();
         document.activeElement.scrollIntoView();
        }, 500);       
      }
    },

禁止用户手动缩放界面

表现

双击或手势会导致页面放大与缩小

原因

HTML 本身会产生放大或缩小的行为，比如在 PC 浏览器上，可以自由控制页面的放大缩小。但是在移动端，我们是不需要这个行为的。所以，我们需要禁止该不确定性行为，来提升用户体验。

解决方案：正确的设置viewport

移动端常规写法

<meta name="viewport" content="width=device-width, initial-scale=1.0">

因此我们可以设置 maximum-scale、minimum-scale 与 user-scalable=no 用来避免这个问题

<meta name=viewport
  content="width=device-width, initial-scale=1.0, minimum-scale=1.0 maximum-scale=1.0, user-scalable=no">

隐藏难看的滚动条

移动端不想显示难看的滚动条。如下图所示的

方案一：使用样式来遮盖

margin-right: -20px; padding-right: 20px;

方案二：使用伪类来隐藏

::-webkit-scrollbar{ display: none }

微信内div超出滚动导致页面滚动卡顿，内容不可见

问题描述：div内的滚动元素，滚动行为无效，无法滚动出现隐藏的内容。也有场景是设置了-webkit-overflow-scrolling：touch导致的问题。

问题原理：非正常文档流的元素当内容超出父元素高度时，会为其创建一个滚动视图，但这个滚动视图有可能在创建时没有得到其真实的需求高度，因此认为不需要滚动，所以无效。

更多说明：在正常的页面布局中，我们所写的滚动使用的为页面的滚动，所以不会有类似的问题。

解决方案：
1 将布局切换使用为相对文档流的布局，使用页面的滚动
2 将布局内的div的高度设置一个最小高度，这个最小高度是需要滚动的
3 尝试添加::-webkit-overflow-scrolling：touch
4 定位做下纠正，position：static

汇总003