目录

  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;

踩坑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. Win10更新后wireshark无法获取网络接口

    一不小心win10自动更新了,打开wireshark发现它无法发现本地的网络接口. 其实解决的办法很简单,就是卸载npcap,安装Win10Pcap即可解决.

  2. pdfium 之二

    https://www.foxitsoftware.cn/products/premium-pdfium/feature.php 基于谷歌PDFium开源代码 谷歌采用福昕的PDF技术为其PDF开源项 ...

  3. 201871010117-石欣钰 《面向对象程序设计(Java)》第十周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...

  4. 201871010134-周英杰《面向对象程序设计(java)》第七周学习总结

    201871010134-周英杰<面向对象程序设计(java)>第七周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...

  5. matlab的clc,close,close all,clear,clear all命令

    clc:清除命令窗口的内容,对工作环境中的全部变量无任何影响 close:关闭当前的Figure窗口 close all:关闭所有的Figure窗口 clear:清除工作空间的所有变量 clear a ...

  6. tornado中命名路由及反向解析使用

    一. 命名路由: 通常路由写法为[ (r'/' , Handler), ... ] 以上路由写法无法实现命名, 使用命名路由需借助tornado提供的方法, 如下: [ tornado.web.url ...

  7. 求数组前K个大的数

    我们举例,假若从10000万个数里选出前100个最大的数据. 首先我们先分析:既然要选出前100个最大的数据,我们就建立一个大小为100的堆(建堆时就按找最大堆的规则建立,即每一个根节点都大于它的子女 ...

  8. 遍历 combobox 中的各个选项

    For ii = 0 To cboTCAT.Items.Count - 1 MessageBox.Show(CType(cboTCAT.DataSource, DataTable).Rows(ii). ...

  9. oracle--oracle18C环境配置(一)

    一,硬件配置检查 使用以下命令确定服务器上的物理RAM大小: # grep MemTotal /proc/meminfo 如果系统中安装的物理RAM的大小小于所需的大小,则必须先安装更多内存,然后再继 ...

  10. Intellij插件之MavenHelper

    作用: 一键查看maven依赖,查看冲突的依赖,一键进行exclude依赖 插件提供地址: https://plugins.jetbrains.com/plugin/7179-maven-helper ...