使用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会失效。

规范中有规定:如果元素的transform值不为none,则该元素会生成包含块和层叠上下文。
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无效问题解决方案的更多相关文章

  1. iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

    做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下 ...

  2. 【移动端debug-4】iOS下setTimeout无法触发focus事件的解决方案

    开篇总结:其实目前无法解决这个bug. 这两天做项目遇到了这个case,项目需求是打开页面的时候,input元素自动弹起键盘.由于各种方面的考虑,我们希望通过setTimeout延时200毫秒让inp ...

  3. 移动端Web开发,ios下 input为圆角

    在处理input的问题时,一般不想要input的原来的样式,一般就直接处理 border: none; outline: none; background: transparent; 这样之后,一般就 ...

  4. iOS下微信语音播放之切换听筒和扬声器的方法解决方案

    [[UIDevice currentDevice] setProximityMonitoringEnabled:YES]; //建议在播放之前设置yes,播放结束设置NO,这个功能是开启红外感应 // ...

  5. IOS 表单含有input框和有position: fixed导致错位的问题

    在input框聚焦失焦的时候,都调用以下js即可 setScrollTop() { let scrollTop = document.body.scrollTop + document.documen ...

  6. iOS通用链接(Universal Links)突然点击无效的解决方案

    接上文<微信中通过页面(H5)直接打开本地app的解决方案>已经把iOS搞定并且已经正常能跑了,突然就再也用不了了... 问题描述 测试告诉我,如果从微信打开App之后,点击App右上角的 ...

  7. iOS 关于开发者证书:此证书的签发者无效的解决方案

    备注:第二个步骤一定要进行,否则弄到吐血,还是现实签发者无效 ---------------------- 1,按照你那个链接下载,https://developer.apple.com/certif ...

  8. 移动端踩坑之旅-ios下fixed、软键盘相关问题总结

    最近一个项目掉进了移动端的大坑,包括ios下fixed布局,h5唤起键盘等问题,作为一个B端程序员,弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome),还好这次让我学习了一下相关 ...

  9. 移动端底部fixed固定定位输入框ios下不兼容

    简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...

随机推荐

  1. FluentData

    FluentData微型ORM 最近在帮朋友做一个简单管理系统,因为笔者够懒,但是使用过的NHibernate用来做这中项目又太不实际了,索性百度了微型ORM,FluentData是第一个跳入我眼睛的 ...

  2. Screwturn搭建企业内部wiki

    企业内部WIKI搭建 本文所使用的是Screwturn 基于asp.net webform和Sql server的. 仅仅要把本文资源下载下来,直接用IIS部署,然后更改web.config的conn ...

  3. WPF换肤之二:可拉动的窗体

    原文:WPF换肤之二:可拉动的窗体 让我们接着上一章: WPF换肤之一:创建圆角窗体 来继续. 在这一章,我主要是实现对圆角窗体的拖动,改变大小功能. 拖动自绘窗体的步骤 首先,通过上节的设计,我们知 ...

  4. java web开发人员经常使用标签

    struts标签库 国际化配置 配置国际化 1.国际化配置 在struts自带的app中的struts-config.xml中的<message-resources parameter=&quo ...

  5. 解决Ubuntu和Windows该文件乱码问题

    1.转换文件内容编码    Windows在自然纯文本文件.当中国作为编码GBK,在Ubuntu下乱码,可以使用iconv命令转换:    iconv -f gbk -t utf8 source_fi ...

  6. go - 内置基础类型

    Go 语言中包括以下内置基础类型: 布尔型:bool 整型:int int64 int32 int16 int8 uint8(byte) uint16 uint32 uint64 uint 浮点型:f ...

  7. MVC模型与FishiGUI应用层MVC型号

    MVC概要: MVC (Modal View Controler)M是指数据模型,V是指用户界面,C则是控制器. 使用MVC的目的是将M和V的实现代码分离,从而使同一个程序能够使用不同的表现形式.比方 ...

  8. 【程序猿助手】Emacs,最强的编辑器,之间的不

     wx_fmt=png" alt="" style="max-width:100%; height:auto!important"> 内容简单 ...

  9. 重新想象 Windows 8 Store Apps (31) - 加密解密: 哈希算法, 对称算法

    原文:重新想象 Windows 8 Store Apps (31) - 加密解密: 哈希算法, 对称算法 [源码下载] 重新想象 Windows 8 Store Apps (31) - 加密解密: 哈 ...

  10. 设单链表中存放n个字符,试设计一个算法,使用栈推断该字符串是否中心对称

    转载请注明出处:http://blog.csdn.net/u012860063 问题:设单链表中存放n个字符.试设计一个算法,使用栈推断该字符串是否中心对称,如xyzzyx即为中心对称字符串. 代码例 ...