ios手机页面问题总会

在这几年前端开发工作中不可避免的接触不少移动端页面的开发，总是伴随着各种各样的问题，今天抽空做个总结，以后再碰到什么问题再补充。

 

问题一：苹果6 唤起输入法，屏幕被推上去

　　在苹果6手机上有时候输完文字收起输入法的时候后被推上去的页面不会主动滑下来，导致页面下方一大块空白

　　解决办法：在输入框失去焦点的时候 调用 window.scrollTo(0, 0) 方法

 

问题二：vue 项微信浏览器目中复制链接不能复制全部

　　我们知道 vue 是单页面应用，有时候可能会复制页面地址，点击微信浏览器右上键弹出如下弹窗

　　

 

　　此时点击复制链接得到的是：http://www.xxxxx.com 后面的二级域名不见了
　　解决方法：先点击刷新，再点击复制链接，或者开发的时候将预计会被复制的页面以 window.locash.href 方法打开，不要使用 router

 

问题三：层级问题

　　我们知道 vue 属于模块化开发，在开发中会写很多个组件组合在一起，当我们某个弹窗组件设置 position: fixed; 属性时会受到它的父组件的层级影响，即当弹窗组件的父级 z-index 比较小时，弹窗组件的 z-index 无论多高都会被其他层级遮挡

　　解决办法：如果可以试用 position: absolute; 代替 position: fixed; 时选用 position: absolute; 

 

问题四：获取验证码，输入框问题

　　这两天公司有一个获取手机验证码的需求

　　

 

 　  思路：写一个隐藏的 input 输入框，再写四个框框接收验证码

　　隐藏 input 方法一：将 input 宽高设置成 0，

　　bug -：获取焦点后 input 的位置会出现一闪一闪的光标

　　隐藏 input 方法二：将 input 的透明度设置为 opacity: 0；

　　bug 二：获取焦点后 input 的位置会出现一闪一闪的光标

　　解决办法：不设置宽和高，以及透明度，利用 position: absolute; 将input定位到一个看不见的位置，注意不高太高也不要太低，利用 left 或 right 将 input 放在一个看不见的地方就行

　　bug 三：当弹窗使用 position: absolute; 定位时，每点击一次输入法屏幕都会自动滑下去被输入法遮挡，

　　解决办法：改为 position: fixed; 定位或不用系统输入法，自己手撸输入按钮