踩坑ios H5
目录
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的更多相关文章
- 每日踩坑 2019-07-30 H5 使用 iframe 底部有白边
用个iframe累死累活的 用 js 动态计算高度, 结果明明px都对,然后却把页面滚动条也整出来了. 查看元素盒模型也一切正常. 然后仔细观察就发现是下边多了几个像素的白色边. 然后就 百度呗 以下 ...
- html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示
1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...
- ios浏览器调试踩坑(1)----mescroll.js和vue-scroller
主要记录在ios浏览器出现触摸无限加载的情况 使用vue-scroller和mescroll.js/mescroll.vue先踩ios浏览器默认滑动会影响mescroll的方法调用. 首先给公共js加 ...
- ios UIWebView加载HTMLStr图文,关于图片宽高设置,webView内容实际高度的踩坑问题
一.关于UIWebView 与 WKWebView 选取问题 从发布时间看: 2008年7月11日,在新一代iPhone3G正式发售当天,iPhone OS 2.0(iOS 2.0)推出,这时候就有U ...
- iOS自动化打包上传的踩坑记
http://www.cocoachina.com/ios/20160624/16811.html 很久以前就看了很多关于iOS自动打包ipa的文章, 看着感觉很简单, 但是因为一直没有AppleDe ...
- Taro 开发踩坑指南 (小程序,H5, RN)
Taro 开发踩坑指南 (小程序,H5, RN) css taro 如何展示多行文本省略号 https://www.cnblogs.com/xgqfrms/p/12569057.html UI 设计稿 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- html2canvas以及domtoimage的使用踩坑总结
前言 首先做个自我介绍,我是成都某企业的一名刚刚入行约一年的前端,在之前的开发过程中,遇到了问题,也解决了问题,但是在下一次解决相同问题的时候,只对这个问题有一丝丝的印象,还需要从新去查找,于是,我注 ...
- React Native Android配置部署踩坑日记
万事开头难 作为一只进入ECMAScript世界不久的菜鸟,已经被React Native的名气惊到了,开源一周数万星勾起了我浓烈的兴趣.新年新气象,来个HellWorld压压惊吧^_^(故意少打个' ...
随机推荐
- 如何防止XSS攻击?
来自: https://www.freebuf.com/articles/web/185654.html 前端安全 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业 ...
- 201871010110-李华《面向对象程序设计(java)》第十五周学习总结
博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...
- 添加ssh密钥
直接运行ssh-keygen,可以不输入密码 $ ssh-keygen Generating public/private rsa key pair. Enter file in which to s ...
- centos7 扩容
用 df -h, 看到磁盘满了 (注意:如果是二,或者第三次扩容,下面的参数就不一样) fdisk /dev/sda 但是失败了,显示没有多余的分区 可以看到 有个/dev/sda4 是我在这之前刚刚 ...
- zz开源 MNN:淘宝在移动 AI 上的实践
开源 MNN:淘宝在移动 AI 上的实践 陈以鎏(离青) 阅读数:40612019 年 6 月 28 日 随着深度学习的快速发展和端侧设备算力的不断提升,原本在云端执行的推理预测工作正在部分迁 ...
- odoo 新建模块命令
python odoo-bin scaffold academy myaddons 自动初始化所有的配置信息: python odoo-bin --addons=addons,"/home/ ...
- js将字符串内空格去除的方法
function noSpace(x){ if(x.match(/\s*/g)){ return x.replace(/\s*/g,""); }else{ return x; } ...
- windwos文件句柄数限制
1.修改注册表,位置如下: HKEY_LOCAL_MACHINE/SOFTWARE/Microsoft/Windows NT/CurrentVersion/Windows 2.设置 1.GDIProc ...
- Oracle 的 连接
select a.alert_id, b.alert_id from a inner join b on a.alert_id = b.alert_id ; 上面和下面是一样的,都是 内连接 sele ...
- oracle--ORA-27125
一,问题描述 ORA-27125 unable to create shared memory segment 二,问题解决 查看系统的oracleid号 [root@dgwxpdb ~]# id o ...