问题列表

移动端input type=number的时候，有不美观的外观

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

  1. input[type=number]::-webkit-inner-spin-button,  
  2. input[type=number]::-webkit-outer-spin-button { 
  3.         -webkit-appearance: none; 
  4.         appearance: none; 
  5.         margin: 0; 
  6. }

移动端遮罩滑动时底部也发生了滑动，怎么解决

解决方案有两种：
1 滑动时避免相关的事件冒泡
2 出现遮罩的时候，设置页面的部分超出不可见，不可滚动；当遮罩消失，再让页面恢复正常

ios页面橡皮弹回效果遮挡页面选项卡

解决方案 ：
(1) 有时body和html的height: 100%去除掉问题可能就没有了。
(2) 到达临界值的时候在阻止事件默认行为

  1. var startY,endY;
  2. //记录手指触摸的起点坐标
  3. $('body').on('touchstart',function (e) {
  4.      startY = e.touches[0].pageY;
  5. });
  6. $('body').on('touchmove',function (e) {
  7.      endY = e.touches[0].pageY;  //记录手指触摸的移动中的坐标
  8.      //手指下滑，页面到达顶端不能继续下滑
  9.      if(endY>startY&& $(window).scrollTop()<=0){
  10.          e.preventDefault();
  11.      }
  12.    //手指上滑，页面到达底部能继续上滑
  13.      if(endY<startY&& $(window).scrollTop()+ 
  14.          $(window).height()>=$('body')[0].scrollHeight){
  15.          e.preventDefault();
  16.      }
  17. })

有时也会碰见弹窗出来后两个层的橡皮筋效果出现问题，我们可以在弹出弹出时给底层页面加上一个类名，类名禁止页面滑动这样下层的橡皮筋效果就会被禁止，就不会影响弹窗层。

设置高度100%之后 ，设置margin-bottom无效

改为设置成padding-bottom

小米手机超出滚动没有效果

position:fixed的问题，换成正常布局 ，或者绝对定位即可

Ios键盘换行变为搜索

首先，input 要放在 form里面。
这时 “换行” 已经变成 “前往”。
如果想变成 “搜索”，input 设置 type=”search”。

ios对position: fixed不太友好

Q: 如题：一般情况下是我们会有底部的输入框，在安卓下可能问题比较少，在ios问题较多。
A:解决方案 ：将滚动条移动到底部。

  1. var u = navigator.userAgent, app = navigator.appVersion;
  2. var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  3. if (isiOS) {
  4.     $('textarea').focus(function () {
  5.         window.setTimeout('scrollBottom()', 500);
  6.     });
  7. }
  8. function scrollBottom() {
  9.     window.scrollTo(0, $('body').height());
  10. }

用户设置字号放大或者缩小导致页面布局错误

  1. body  
  2.     {  
  3.         -webkit-text-size-adjust: 100% !important;  
  4.         text-size-adjust: 100% !important;  
  5.         -moz-text-size-adjust: 100% !important;  
  6.     }

微信网页点击输入框虚拟键盘弹起后导致页面里的按钮响应区域错位

输入框弹出虚拟键盘后页面按钮操作响应位置错位
出现在微信商城或者页面
开发框架 vue
问题操作:
当页面上有输入框,凡是点击弹出虚拟键盘后,都会导致页面上某些按钮响应错位错位
解决方法:
每次监听input失焦的时候,让页面回滚到顶部或者底部;
即vue 有个watch方法,实时监听input里的v-focus状态,当input失焦的时候,让页面回滚到相应位置,代码如下.

  1. phoneFocused: function(newValue) {
  2.   if(!newValue) {
  3.         setTimeout(() =>; {
  4.             //滚动到顶部
  5.             document.body.scrollTo(0, 0);
  6.             //滚动到底部
  7.             document.body.scrollTo(0, document.documentElement.clientHeight);
  8.         })
  9.     }
  10. },

开启硬件加速

Q: 优化渲染性能
A:代码如下

  1. -webkit-transform: translate3d(0, 0, 0);
  2. -moz-transform: translate3d(0, 0, 0);
  3. -ms-transform: translate3d(0, 0, 0);
  4. transform: translate3d(0, 0, 0);