移动端 常见问题整理 iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
使用iScroll时,input等不能输入内容的解决方法
<script>
function allowFormsInIscroll(){
[].slice.call(document.querySelectorAll('input, select, button')).forEach(function(el){
el.addEventListener(('ontouchstart' in window)?'touchstart':'mousedown', function(e){
e.stopPropagation();
})
})
}
document.addEventListener('DOMContentLoaded', allowFormsInIscroll, false);
</script>
iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了。
当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡
当 ipad上网页宽度超过980是,页面被截断 content="width=980 默认980;需要重新设置;
<meta name="viewport" content="width=1200, target-densitydpi=high-dpi, user-scalable=no" />
移动端浏览器中经常会出现高度100%的渲染错误,页面低端和系统自带的导航条重合了,高度的不正确我们需要重置修正它
document.documentElement.style.height = window.innerHeight + 'px';
叠加区高亮
input, textarea, button, a{-webkit-tap-highlight-color:rgba(0,0,0,0);}
button在ios上的默认样式 屏蔽输入框怪异的内阴影。
-webkit-appearance: none;border-radius: 0
IOS 等Retina屏幕 图片有点朦胧胧的感觉 根据“pixel rotio” 设置图片大小;
-webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size
iOS中,当你点击比如 input 准备输入时,虚拟键盘弹出,整个视窗的 高度 就会变为 减去键盘 的高度,加入你在底部有fixed的元素比如btn,这个元素就会跑上来。我是当focus时就把它设:absolute ;
在部分android 机型中的输入框可能多余的浮出表单,经过观察与测试发现只有input:password类型的输入框存在,那么我们只要使用input:text类型的输入框并通过样式
-webkit-text-security: disc;
隐藏输入密码从而解决。
电脑模拟器上 img border-radius:50%; overflow:hidden;没出现问题,到手机上 img四角成了方框;有时候border-radius百分比无效
border-radius:50%; overflow:hidden;
android 4.0版本以下CSS :active伪状态效果无法兼容,我们给该元素的touch系列的事件(touchstart/touchend/touchmove)绑定一个空匿名方法:
var element=document.getElementsById(”btnShare”);
element.addEventListener(‘touchstart’,function(){},false)
移动端还是PC短 如果使用fixed 元素;元素不停渲染问题;这个可以用谷歌浏览器开发者—esc -esc-rendering-show paint rectangles 查看
-webkit-transform:translateZ(0);
translateZ 还能修复部分 > 字符 问题;
父元素如果有了transform属性,子元素设置的fixed会失效。
CSS Transforms Module Level 1
不只在手机上,电脑上也一样。除了fixed元素会受影响之外,z-index(层叠上下文)值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果transform元素的display值为inline时又会有所不同。
最简单的解决方法就是transform元素内部不能有absolute、fixed元素。
textarea 文本框高度自动
//文本框高度自动
var autoTextarea = function(elem, extra, maxHeight) {
extra = extra || 0;
var isFirefox = !!document.getBoxObjectFor
|| "mozInnerScreenX" in window, isOpera = !!window.opera
&& !!window.opera.toString().indexOf("Opera"), addEvent = function(
type, callback) {
elem.addEventListener ? elem.addEventListener(type, callback,
false) : elem.attachEvent("on" + type, callback)
}, getStyle = elem.currentStyle ? function(name) {
var val = elem.currentStyle[name];
if (name === "height" && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top
- parseFloat(getStyle("paddingTop"))
- parseFloat(getStyle("paddingBottom")) + "px"
}
return val
} : function(name) {
return getComputedStyle(elem, null)[name]
}, minHeight = parseFloat(getStyle("height"));
elem.style.resize = "none";
var change = function() {
var scrollTop, height, padding = 0, style = elem.style;
if (elem._length === elem.value.length) {
return
}
elem._length = elem.value.length;
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle("paddingTop"))
+ parseInt(getStyle("paddingBottom"))
}
scrollTop = document.body.scrollTop
|| document.documentElement.scrollTop;
elem.style.height = minHeight + "px";
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = "auto"
} else {
height = elem.scrollHeight - padding;
style.overflowY = "hidden"
}
style.height = height + extra + "px";
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height) < 100 ? parseInt(style.height)
: 100 + "px"
}
};
addEvent("propertychange", change);
addEvent("input", change);
addEvent("focus", change);
change();
}; autoTextarea(textsa);// 调用
其他新增的css3注意细节
ios Fixed + Input 失效解决办法
参考淘宝的 就好
参考网址
http://www.ghugo.com/chrome-rendering-tools-1/ 这个非常好
http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html
http://www.w3cfuns.com/article-1248-1.html
移动端 常见问题整理 iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案的更多相关文章
- iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下 ...
- 【移动端debug-4】iOS下setTimeout无法触发focus事件的解决方案
开篇总结:其实目前无法解决这个bug. 这两天做项目遇到了这个case,项目需求是打开页面的时候,input元素自动弹起键盘.由于各种方面的考虑,我们希望通过setTimeout延时200毫秒让inp ...
- 移动端Web开发,ios下 input为圆角
在处理input的问题时,一般不想要input的原来的样式,一般就直接处理 border: none; outline: none; background: transparent; 这样之后,一般就 ...
- iOS下微信语音播放之切换听筒和扬声器的方法解决方案
[[UIDevice currentDevice] setProximityMonitoringEnabled:YES]; //建议在播放之前设置yes,播放结束设置NO,这个功能是开启红外感应 // ...
- IOS 表单含有input框和有position: fixed导致错位的问题
在input框聚焦失焦的时候,都调用以下js即可 setScrollTop() { let scrollTop = document.body.scrollTop + document.documen ...
- iOS通用链接(Universal Links)突然点击无效的解决方案
接上文<微信中通过页面(H5)直接打开本地app的解决方案>已经把iOS搞定并且已经正常能跑了,突然就再也用不了了... 问题描述 测试告诉我,如果从微信打开App之后,点击App右上角的 ...
- iOS 关于开发者证书:此证书的签发者无效的解决方案
备注:第二个步骤一定要进行,否则弄到吐血,还是现实签发者无效 ---------------------- 1,按照你那个链接下载,https://developer.apple.com/certif ...
- 移动端踩坑之旅-ios下fixed、软键盘相关问题总结
最近一个项目掉进了移动端的大坑,包括ios下fixed布局,h5唤起键盘等问题,作为一个B端程序员,弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome),还好这次让我学习了一下相关 ...
- 移动端底部fixed固定定位输入框ios下不兼容
简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...
随机推荐
- win7问题解决,凭据管理器和无法访问,不允许一个用户使用一个以上用户名与服务器或共享资源进行多重连接。
WIN7凭据管理器,如果你用一个帐号远程登录以后在电脑中会记住这个信息,假如你想用另外的帐号,那么就到控制面板-凭据管理器里中进行修改或者删除. 如果你登录以后提示,“无法访问.不允许一个用户使用一个 ...
- vim使用(三):.viminfo和.vimrc
1. viminfo 在vim中操作的行为,vim会自己主动记录下来,保存在 ~/.viminfo 文件里. 这样为了方便下次处理, 如:vim打开文件时,光标会自己主动在上次离开的位置显示. 原来搜 ...
- LightOj 1148 Basic Math
1148 - Mad Counting PDF (English) Statistics Forum Time Limit: 0.5 second(s) Memory Limit: 32 MB Mob ...
- linux上安装Drupal
linux上安装Drupal 前言:国内用drupal的并不太多,网上资料也很少.要注意的是drupal尽量别使用apt来安装,特别是ubuntu平台的drupal做出了一定的更改,会妨碍后期的学习和 ...
- WPF 3D 常用类(1)
原文:WPF 3D 常用类(1) 几何数据相关类 Geometry3D 抽象类, 用于定义物体的几何数据, 可用于计算HitTest和BoundingBox MeshGeometry3D Geomet ...
- iOS UIWebView 载入https 网站出现NSURLConnection/CFURLConnection HTTP load failed (kCFStreamErrorDomainSSL,
今天在载入https网站的时候遇到例如以下的错误问题.所以对自己之前写的iOS内嵌webview做了一些改动,能够让它载入http网站也能够让它载入https网站. 以下是我载入https网站的时候出 ...
- 冒泡排序java
先对冒泡排序做一个简单的解释,然后是代码的实现.解释出资<java的数据结构和算法>,大家可以看看. 排序类: package com.dxx.order; public class Bu ...
- Windows Phone 8 - Runtime Location API - 1
原文:Windows Phone 8 - Runtime Location API - 1 在Windows Phone里要做Background Service的方式,除了Background Ag ...
- ORACLE Install (10g r2) FOR Red Hat Enterprise Linux Server release 5.5 (64 bit) (转)
OS Info----------# cat /etc/redhat-releaseRed Hat Enterprise Linux Server release 5.5 (Tikanga)# cat ...
- 在基于阿里云serverCentOS6.5下安装Subversion 1.6.5服务
近期阿里云搞了个1元免费提供云server的活动,偶心痒痒就申请了一个. 正好能够作为团队的SVNserver了,以下就来部署SVN服务吧. 一.安装基础环境 apr-1.5.0.tar.gz apr ...