zoukankan      html  css  js  c++  java
  • 踩坑ios H5

    目录

    1. input获取焦点时,页面被放大
    2. ios input输入时白屏
    3. 软键盘撑起页面下不来
    4. ios页面滚动不流畅
    5. position:fixed/absolute随屏幕滚动

    1.input获取焦点时,页面被放大

    设置meta标签

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    

    2.ios input输入时白屏

    这个问题貌似只有再ios9中才有


    解决方法:在input的父元素上添加相对定位就行了,非常神奇,具体因为啥不太清楚。。

    style="postion:relative;"
    

    3.软键盘撑起页面下不来

    目前有2个方法:

    (1) js控制focus blur
    //input输入框弹起软键盘的解决方案。
    var bfscrolltop = document.body.scrollTop;
    $("input").focus(function () {
      document.body.scrollTop = document.body.scrollHeight;
    }).blur(function () {
      document.body.scrollTop = bfscrolltop;
    });
    
    (2) (待验证0.0)
    position: absolute;
    webkit-overflow-scrolling: touch;
    z-index:1;
    
    //js再控制blur //让页面向下滑动500
    document.body.addEventListener('focusout', function () {
        window.scrollTo(0,500);
    })
    

    4.ios页面滚动不流畅

    我的解决方法是,让html和body固定100%(或者100vh),然后再在内部放一个height:100%的div,设置overflow-y: auto;和-webkit-overflow-scrolling: touch;

    .h100scroll {
      /* 模态框之类的div不能放在这个容器中 */
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
    }
    

    5.position:fixed/absolute随屏幕滚动

    注:ios里貌似不支持fixed。。。这里主要指absolute


    在position:fixed/absolute内加入:

    -webkit-transform: translateZ(0);
    

    抖动情况,则在内容区域,加入 :

    overflow-y: auto;
    
  • 相关阅读:
    Java: 数据类型
    数据结构是什么
    数据结构:进制转换
    数据结构:堆与栈
    class的写法
    Java:异常体系
    数据结构: 先进后出——堆栈
    tomcat:web容器
    Windows: Dos命令
    面向函数范式编程
  • 原文地址:https://www.cnblogs.com/tongzhou/p/11088011.html
Copyright © 2011-2022 走看看