IOS的一些坑

1.解决IOS safari在input focus弹出输入法时不支持position fixed的问题

$(‘input‘).focus(function(){
        var _this = this;

//无键盘时输入框到浏览器窗口顶部距离
        var noInputViewHeight = $(window).height() - $(_this).height();

//网页正文内容高度
        var contentHeight = $(document).height() - $(_this).height();

//控制正文内容高度大于一屏,保证输入框固定底部
        contentHeight = contentHeight > noInputViewHeight ? contentHeight : noInputViewHeight;

//因为弹出输入法需要时间,需延时处理
        setTimeout(function(){

//弹出输入法时滚动条的起始滚动距离
                var startScrollY = $(window).scrollTop();

//弹出输入法时输入框到窗口顶部的距离,即到软键盘顶部的起始距离
                var inputTopHeight = $(_this).offset().top - startScrollY;

//弹出输入法时输入框预期位置,即紧贴软键盘时的位置。因输入框此时处于居中状态,所以其到窗口顶部距离即为需往下移动的距离。
                var inputTopPos = $(_this).offset().top + inputTopHeight;

//控制div不超出正文范围
                inputTopPos = inputTopPos > contentHeight ? contentHeight : inputTopPos;

//设置输入框位置使其紧贴输入框
                $(_this).css({‘position‘:‘absolute‘, ‘top‘:inputTopPos });

//给窗口对象绑定滚动事件,保证页面滚动时div能吸附软键盘
                $(window).bind(‘scroll‘, function(){

//表示此时有软键盘存在,输入框浮在页面上了
                        if (inputTopHeight != noInputViewHeight) {

//页面滑动后,输入框需跟随移动的距离
                                var offset = $(this).scrollTop() - startScrollY;

//输入框移动后位置
                                afterScrollTopPos = inputTopPos + offset;

//设置输入框位置使其紧贴输入框
                                $(_this).css({‘position‘:‘absolute‘, ‘top‘:afterScrollTopPos });
                        }
                });
        }, 100);
}).blur(function(){//输入框失焦后还原初始状态
        $(".div-input").removeAttr(‘style‘);
        $(window).unbind(‘scroll‘);
});

2.解决input 和 a 标签点击时出现透明灰色框

-webkit-tap-highlight-color:rgba(255,255,255,0);
        -webkit-appearance: none;

3.解决IOS 数字带下划线

<meta name="format-detection" content="telephone=no" />

时间: 2024-11-07 00:44:31

IOS的一些坑的相关文章

【Swift】iOS开发小坑历险记(二)

前言 这个系列主要是一些开发中遇到的坑记录分享,有助于初学者跨过这些坑,攒够 7 条发一篇. 声明  欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 1.用动画更新约束没有动画效果? 缺少 layoutIfNeeded ,事例: UIView.animateWithDuration(0.15, animations: { () -> Void in self.heightConst

H5嵌入原生开发小结----兼容安卓与ios的填坑之路

一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的坑.主要分UI展示,键盘,输入框等等.解决bug最苦恼的问题不是没有解决方案,而是你没有找到真正的原因.再就是现象难以重现,每次都要发布代码,然后到手机app中去测试,模拟.这些地方会耗费大量的精力. 一.UI相关 1.安卓4.4以下不支持fixed布局. fixed布局的作用之一就是在手机键盘弹起

iOS 10 的坑:新机首次安装 app,请求网络权限“是否允许使用数据”

这个坑最近弄得我很抓狂,不过现在基本弄清楚了.记录一下过程中我收集到的信息,分享给大家. 症状 iOS 10 之后,陆陆续续地有用户联系我们,说新机第一次安装.第一次启动的时候,app 首屏一片空白,完全没数据.kill 掉重新打开就好了. 一开始以为是用户网络情况不好,但随着越来越多的用户报告这个问题,我意识到这并不是偶然情况.但是并非所有用户都如此. 而且卸载掉之后,如果再装,也不会出现这现象.问题只会出现在这台设备第一次安装.第一次启动的情况下.如果把手机抹掉.重置,问题还能重现. 定位问

iOS WKWebView 那些坑

导语 WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件,用以替代 UIKit 中笨重难用.内存泄漏的 UIWebView.WKWebView 拥有60fps滚动刷新率.和 safari 相同的 JavaScript 引擎等优势. 简单的适配方法本文不再赘述,主要来说说适配 WKWebView 过程中填过的坑以及善待解决的技术难题. 1.WKWebView 白屏问题 WKWebView 自诩拥有更快的加载速度,更低的内存占用,但实际上 WKWebView 是一

new Date()在ios下的坑

坑位 最新在开发一个跑步小程序,在使用new Date()的时候发现在IOS下全是NaN. Why new Date("2018-04-27 11:11")在chrome,firefox,Android中能正常工作的. 而在ios下只支持new Date("2018/04/27 11:11")的格式. 解决办法 使用new Date("2018/04/27 11:11")的形式,这种形式在所有平台都支持. 可以通过正则把中横扛替换成斜杠:new

微信小程序开发之IOS/Android兼容坑(持续更新)

一.时间转换问题: 这不只是小程序上面的问题是ios系统 都有这个问题就是new  Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下 1.替换”-“为”/“ 2.删除”.“后面的字符串(带毫秒也会有问题) 二.定位问题 整个页面的fixed定位,在ios下下拉会触发下拉事件,但是没有动画效果.Android就能正常运行 三.absolute定位问题, 这不属于手机兼容问题 使用absolute定位,并且宽带设置了100% 并且设

iOS UI 的坑:不要 remove UITableViewCell 的 contentView

看到标题,你可能会想,怎会有人傻到这么做?好吧,一个像我一样没有经验的程序员的确可能. 这个问题的背景是,在需要重绘UITableViewCell时,经常遇到需要清空所有subview的情况.而我们有这样一段代码可以利用: UIView+Utils.m - (void)removeAllSubviews { for (UIView *subView in self.subviews) { [subView removeFromSuperview]; } } 正确的做法 正确的做法是,把所有的子

【ios h5踩坑】关于ios上嵌入h5导致input聚焦时页面自动放大问题

目录 问题描述 问题分析 解决方案 ? 问题描述 最近有一个项目需要给ios和安卓app开发h5页面,在安卓上测试没有问题,但是ios(iphone8)上点击输入框会导致页面缩放失败,但在iphone 8plus/x上不会产生这种问题.并且设置 <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-

基于Vue公众号开发中的哪些坑 (严重鄙视ios,遇到的坑基本都是在ios中)

一.ios白屏问题ios端基于vue开发的H5无法正常显示,白屏问题1.代码问题确定方法:在ie/edge浏览器中打开,看是否正常显示,如果仍然白屏,可以确定问题解决方法:1.代码中是否使用es6,如果使用,确定使用es6转es5,(npm install babel-polyfillnpm install es6-promise)2.参考 https://www.cnblogs.com/love314159/articles/9355785.html3.以上方法都不行的话,查看源码是在main