目录

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

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

设置meta标签

  1. <meta name="apple-mobile-web-app-capable" content="yes">
  2. <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的父元素上添加相对定位就行了,非常神奇,具体因为啥不太清楚。。

  1. style="postion:relative;"

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

目前有2个方法:

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

4.ios页面滚动不流畅

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

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

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

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



在position:fixed/absolute内加入:

  1. -webkit-transform: translateZ(0);

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

  1. overflow-y: auto;

踩坑ios H5的更多相关文章

  1. 每日踩坑 2019-07-30 H5 使用 iframe 底部有白边

    用个iframe累死累活的 用 js 动态计算高度, 结果明明px都对,然后却把页面滚动条也整出来了. 查看元素盒模型也一切正常. 然后仔细观察就发现是下边多了几个像素的白色边. 然后就 百度呗 以下 ...

  2. html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示

    1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...

  3. ios浏览器调试踩坑(1)----mescroll.js和vue-scroller

    主要记录在ios浏览器出现触摸无限加载的情况 使用vue-scroller和mescroll.js/mescroll.vue先踩ios浏览器默认滑动会影响mescroll的方法调用. 首先给公共js加 ...

  4. ios UIWebView加载HTMLStr图文,关于图片宽高设置,webView内容实际高度的踩坑问题

    一.关于UIWebView 与 WKWebView 选取问题 从发布时间看: 2008年7月11日,在新一代iPhone3G正式发售当天,iPhone OS 2.0(iOS 2.0)推出,这时候就有U ...

  5. iOS自动化打包上传的踩坑记

    http://www.cocoachina.com/ios/20160624/16811.html 很久以前就看了很多关于iOS自动打包ipa的文章, 看着感觉很简单, 但是因为一直没有AppleDe ...

  6. Taro 开发踩坑指南 (小程序,H5, RN)

    Taro 开发踩坑指南 (小程序,H5, RN) css taro 如何展示多行文本省略号 https://www.cnblogs.com/xgqfrms/p/12569057.html UI 设计稿 ...

  7. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  8. html2canvas以及domtoimage的使用踩坑总结

    前言 首先做个自我介绍,我是成都某企业的一名刚刚入行约一年的前端,在之前的开发过程中,遇到了问题,也解决了问题,但是在下一次解决相同问题的时候,只对这个问题有一丝丝的印象,还需要从新去查找,于是,我注 ...

  9. React Native Android配置部署踩坑日记

    万事开头难 作为一只进入ECMAScript世界不久的菜鸟,已经被React Native的名气惊到了,开源一周数万星勾起了我浓烈的兴趣.新年新气象,来个HellWorld压压惊吧^_^(故意少打个' ...

随机推荐

  1. 如何防止XSS攻击?

    来自: https://www.freebuf.com/articles/web/185654.html 前端安全 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业 ...

  2. 201871010110-李华《面向对象程序设计(java)》第十五周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  3. 添加ssh密钥

    直接运行ssh-keygen,可以不输入密码 $ ssh-keygen Generating public/private rsa key pair. Enter file in which to s ...

  4. centos7 扩容

    用 df -h, 看到磁盘满了 (注意:如果是二,或者第三次扩容,下面的参数就不一样) fdisk /dev/sda 但是失败了,显示没有多余的分区 可以看到 有个/dev/sda4 是我在这之前刚刚 ...

  5. zz开源 MNN:淘宝在移动 AI 上的实践

    开源 MNN:淘宝在移动 AI 上的实践   陈以鎏(离青) 阅读数:40612019 年 6 月 28 日   随着深度学习的快速发展和端侧设备算力的不断提升,原本在云端执行的推理预测工作正在部分迁 ...

  6. odoo 新建模块命令

    python odoo-bin scaffold academy myaddons 自动初始化所有的配置信息: python odoo-bin --addons=addons,"/home/ ...

  7. js将字符串内空格去除的方法

    function noSpace(x){ if(x.match(/\s*/g)){ return x.replace(/\s*/g,""); }else{ return x; } ...

  8. windwos文件句柄数限制

    1.修改注册表,位置如下: HKEY_LOCAL_MACHINE/SOFTWARE/Microsoft/Windows NT/CurrentVersion/Windows 2.设置 1.GDIProc ...

  9. Oracle 的 连接

    select a.alert_id, b.alert_id from a inner join b on a.alert_id = b.alert_id ; 上面和下面是一样的,都是 内连接 sele ...

  10. oracle--ORA-27125

    一,问题描述 ORA-27125 unable to create shared memory segment 二,问题解决 查看系统的oracleid号 [root@dgwxpdb ~]# id o ...