澳门新萄京8522:ios和android适配难题总括

澳门新萄京8522:ios和android适配难题总括

解决

率先种经考试有些标题影响了得以落成,这里只谈谈第三种。

直接上代码,这里是react项目(css设置absolute同盟js改造top达成效益,transition过渡加强用户体验,这里就不放了)

  getElementOffsetTop(el) {
    let top = el.offsetTop
    let cur = el.offsetParent
    while(cur != null){
          top += cur.offsetTop
          cur = cur.offsetParent
   }
   return top
  }

  componentDidMount() {
    const u = navigator.userAgent
    const isAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1;//android终端
    // alert('android'+isAndroid)
    if(isAndroid){ // android统一处理,不影响ios的自身处理
      const body = document.getElementsByTagName('body')[0] // 兼容获取body

      const regDom = document.querySelector('.wrapper_register') // 获取页面根元素
      const content = document.querySelector('.content') // 表单内容部分

      // const scrollHeight = body.scrollHeight // 网页文档高
      // const scrollTop = body.scrollTop// 卷上去的高

      const clientHeight = body.clientHeight //可见高
      const fixHeight = clientHeight/3 // 定位高,弹出键盘时input距浏览器上部的距离,自己定义合适的

      // 符合需弹出键盘的元素query
      const queryStr = 'input[type="text"], input[type="tel"], input[type="password"], textarea'
      const inputs = content.querySelectorAll(queryStr)

      // console.log(inputs)

      const offsetTopArr = Array.prototype.map.call(inputs,item=>{
        return this.getElementOffsetTop(item) // offsetTop只能获取到顶部距它的offsetParent的距离,需此方法获取到元素距顶部的距离
      })

      inputs.forEach((item, i)=>{
        item.addEventListener('focus',()=>{
          // 改变top上移页面
          regDom.style.top = '-' + (offsetTopArr[i] - fixHeight) + 'px'
        })

        item.addEventListener('blur',()=>{
          // 恢复top
          regDom.style.top = 0
        })
      })
    }
  }

作用基本达成,这里还有四个难题:

首先,假如上边包车型地铁付出按键是fixed,有个别手提式有线话机键盘弹出时会把按键顶上来,如果上述代码中fixHeight设置不对路,会形成这一个开关遮挡输入框。所感到了统一效果,将底部开关撤销fixed,随页面滚动。

其次,借使点击键盘上的收起键盘按键,会促成页面top不可能苏醒,因为未有接触输入框失焦方法,需点击空白处苏醒。(近年来没找到化解办法)

3、应用

连带知识点

移动端、 适配(兼容)、 ios点击事件300ms延迟、 点击穿透、 定位失效......

除此以外,有些机型去除不了,如诺基亚二

后续

一.是因为android弹出键盘存在必然延迟,所以能够给top改变加多setTimeout,设置合适的延迟时间。

二.两个h五框架,iScroll、Native.js(尽管在那个标题上没啥用)

3.最终奥义:修改设计稿,3招 ->
使输入框不在页面包车型客车下半部分、采用分页设计、弹出输入层(ps:要和制品和安排性交换,客户不料定会屈服
0.0)

仰望大家斧正,沟通越来越好地化解方案,多谢

十.禁止ios和android用户选汉语字

-webkit-user-select:none

澳门新萄京8522 1
_________________________________________________________________________________

window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("横屏:" + window.orientation);
case 0:
case 180:
alert("竖屏:" + window.orientation);
break;
}
}

潜移默化达成的多少个点:

一.js拿不到键盘的弹出和收受事件;

2.遮盖一层的键盘弹出办法不会触发window.resize事件和onscroll事件。

21 iOS6下伪类:hover

而外<a>之外的成分无效;在Android下则有效。类似

div#topFloatBar_l:hover #topFloatBar_menu { display:block; }

如此的领航彰显在iOS陆点击未有点击效果,只可以通过增添点击侦听器给元素增减class来决定子成分。

主题材料&解决方案

  • 手提式有线电话机浏览器独有的多少个事件?

onTouchmove,ontouchend,ontouchstart,ontouchcancel
  • 怎么要用Zepto?

jquery适用于PC端桌面环境,桌面环境更加复杂,jquery需要考虑的因素非常多,尤其表现在兼容性上面,相对于PC端,移动端的发杂都远不及PC端,手机上的带宽永远比不上pc端。pc端下载jquery到本地只需要1~3秒(90+K),但是移动端就慢了很多,2G网络下你会看到一大片空白网页在加载,相信用户第二次就没打开的欲望了。zepto解决了这个问题,只有不到10K的大小,2G网络环境下也毫无压力,表现不逊色于jquery。所以移动端开发首选框架,个人推荐zepto.js。
  • IOS移动端click事件300ms的延期响应

移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,
2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,比如你在手机上用浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态。
双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接<a href="#"></a>,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后,浏览器会先Hold一段时间t,如果在t时间区间里用户未进行下一次点击,则浏览器会做单击跳转链接的处理,如果t时间里用户进行了第二次单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢?在IOS safari下,大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。
解决方案:
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块,tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件,加快对事件的响应,解决300ms延迟问题
  • 某些情状下对非可点击成分如(label,span)监听click事件,ios下不会接触

解决方案:css增加cursor:pointer;
  • IPhone遮罩层下的input、select、a等要素得以被点击和focus(点击穿透)

问题发现于三星手机,这个在特定需求下才会有,因此如果没有类似问题的可以不看。首先需求是浮层操作,在三星上被遮罩的元素依然可以获取focus、click、change),有两种解决方案:
1.是通过层显示以后加入对应的class名控制,截断显示层下方可获取焦点元素的事件获取
2.是通过将可获取焦点元素加入的disabled属性,也可以利用属性加dom锁定的方式(disabled的一种变换方式)
  • 安卓浏览器看背景图片,有个别设备会搅乱。

//用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?
经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960*640分辨率,在网页里只显示了480*320,这样devicePixelRatio=2。现在android比较乱,有1.5的,有2的也有3的。
想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍)。例如一个div的宽高是100*100,背景图必须得200*200,然后background-size:contain;,这样显示出来的图片就比较清晰了。
//代码可以如下:
background:url(../images/icon/all.png)  no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;
display:inline-block; 
width:100%; 
height:50px; 
  • h5页面有个很蛋疼的难点不怕,当输入框在最头部,点击软键盘后输入框会被遮挡。

//可采用如下方式解决
var oHeight = $(document).height(); //浏览器当前的高度
 $(window).resize(function(){ 
      if($(document).height() < oHeight){ 
            $("#footer").css("position","static"); 
      }else{ 
            $("#footer").css("position","absolute");
      } 
});

至于Web移动端Fixed布局的解决方案,那篇小说也不错

  • 不让 Android 手机识别邮箱

<meta content="email=no" name="format-detection" />
  • 取缔 iOS 识别长串数字为电话

<meta content="telephone=no" name="format-detection" />
  • 不准 iOS 弹出种种操作窗口

-webkit-touch-callout:none
  • 消除 transition 闪屏

-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
  • iOS 系统普通话输入法输入英文时,字母之间也许会晤世1个6分之壹空格

可以通过正则去掉     
 this.value = this.value.replace(/\u2006/g, '');
  • 明确命令禁止ios和android用户选汉语字

-webkit-user-select:none
  • 在ios和andriod中,audio元素和video成分不能够自动播放

//解决方案:触屏即播
$('html').one('touchstart',function(){ audio.play()})
  • ios下撤除input在输入的时候英文首字母的暗中认可大写

<input autocapitalize="off" autocorrect="off" />
  • android下撤废输入语音按键

input::-webkit-input-speech-button {display: none}
  • CSS动画页面闪白,动画卡顿

//解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位
2.开启硬件加速
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  • fixed定位缺陷

ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位
android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位
ios4下不支持position:fixed
解决方案: 可用iScroll插件解决这个问题
  • 截留旋转荧屏时自动调解字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
  • Input 的placeholder会出现文本地方偏上的情况

input 的placeholder会出现文本位置偏上的情况:
PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决是设置line-height:normal;
  • 过往缓存难点

点击浏览器的回退,有时候不会自动执行js,特别是在mobile safari中。这与*往返缓存(bfcache)*有关系。
解决方法 :window.onunload = function(){};
  • calc的兼容性管理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀,目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc,所以要在之前增加一个保守尺寸:
div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); }
  • iOS6下伪类:hover
    除了<a>之外的元素无效; 在Android下则有效。类似 div#topFloatBar_l:hover #topFloatBar_menu { display:block; } 这样的导航显示在iOS6点击没有点击效果,只能通过增加点击侦听器给元素增减class来控制子元素。
  • 在运动端修改难看的点击的高亮效果,iOS和安卓下都灵验:
     “`
    *{-webkit-tap-highlight-color:rgba(0,0,0,0);}
    唯独那么些格局在现行反革命的安卓浏览器下,只好去掉那几个湖蓝的背景象,点击爆发的高亮边框如故尚未去掉,有待消除!

- 一个CSS3的属性,加上后,所关联的元素的事件监听都会失效,等于让元素变得“看得见,点不着”。IE到11才开始支持,其他浏览器的当前版本基本都支持。

pointer-events: none;

详细介绍见这里:[https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events](https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events)
- Zepto点透的解决方案

zepto的tap是经过兼听绑定在document上的touch事件来成功tap事件的模拟的,及tap事件是冒泡到document上接触的,在点击完毕时的tap事件(touchstart\touchend)供给冒泡到document上才会触发,而在冒泡到document此前,用户手的触发显示器(touchstart)和距离显示屏(touchend)是会触发click事件的,因为click事件有延期触发(这正是为啥移动端不用click而用tap的原因)(大约是300ms,为了兑现safari的双击事件的陈设性),所以在进行完tap事件之后,弹出来的选拔组件立时就隐藏了,此时click事件还在延迟的300ms之中,当300ms到来的时候,click到的骨子里不是形成而是**隐身之后的花花世界的要素,要是正下方的元素绑定的有click事件此时便会接触,假若未有绑定click事件的话就当没click,但是正下方的是input输入框(可能select选拔框大概单选复选框),点击暗许聚集而弹出输入键盘,也就出现了地点的点透现象。
//(壹)引进fastclick.js,在页面中投入如下js代码
window.addEventListener( “load”, function() {
FastClick.attach( document.body );
}, false );
//(贰)或许有zepto可能jQuery的js里面增加
$(function() {
FastClick.attach(document.body);
});
//(叁)当然require的话就这么:
var FastClick = require(‘fastclick’);
FastClick.attach(document.body, options);
//(4)用touchend替代tap事件并堵住掉touchend的默许行为preventDefault()
$(“#cbFinish”).on(“touchend”, function (event) {
//很多甩卖举个例子隐藏什么的
event.preventDefault();
});
//(5)延迟一定的时日(300ms+)来处总管件
\((“#cbFinish”).on(“tap”, function (event) {
set提姆eout(function(){ //大多管理比如隐藏什么的 },320); }); “` –
图片加载
若你遇到图片加载比非常慢的标题,对那种景观,手提式有线电话机支付一般用canvas方法加载:
具体的canvas API
参见: “`
上边比方说美赞臣(Meadjohnson)个canvas的例子:
<li><canvas></canvas></li> js动态加载图片和li
总共比方一七张图纸! vartotal=一7; varzWin=\)(window);
varrender=function(){
varpadding=2;
varwinWidth=zWin.width();
varpicWidth=Math.floor((winWidth-padding*3)/4);
vartmpl =”;
for(vari=1;i<=totla;i++){
varp=padding;
varimgSrc=’img/’+i+’.jpg’;
if(i%4==1){
p=0;
}
tmpl +=’

‘;
varimageObj = newImage();
imageObj.index = i;
imageObj.onload = function(){
varcvs =$(‘#cvs_’+this.index)[0].getContext(‘2d’);
cvs.width = this.width;
cvs.height=this.height;
cvs.drawImage(this,0,0);
}
imageObj.src=imgSrc;
}
}
render();

- 防止手机中网页放大和缩小

- apple-mobile-web-app-capable

apple-mobile-web-app-capable是安装Web应用是或不是以全屏格局运作。
语法:
表明:假若content设置为yes,Web应用会以全屏形式运维,反之,则不会。
content的暗中认可值是no,表示不奇怪彰显。你能够透过只读属性window.navigator.standalone来分明网页是否以全屏方式突显。

- html5调用安卓或者ios的拨号功能

html5提供了电动调用拨号的价签,只要在a标签的href中增加tel:就能够了。
如下:
<ahref=”tel:4008106999,1034″>400-810-6999 转 1034
拨打手提式有线话机直接如下:
点击拨打156777767陆七

- html5GPS定位功能  具体请看:http://www.jb51.net/post/html5_GPS_getCurrentPosition
- 上下拉动滚动条时卡顿、慢

body {
-webkit-overflow-scrolling:touch;
overflow-scrolling: touch;
}

#####Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

- 禁止复制、选中文本

Element {-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}

- iphone及ipad下输入框默认内阴影

Element{
-webkit-appearance:none;
}

- 13、ios和android下触摸元素时出现半透明灰色遮罩

Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
设置阿尔法值为0就足以去除半晶莹剔透浅湖蓝遮罩,备注:transparent的属性值在android下无效。

一篇文章有详细介绍,地址:http://www.jb51.net/post/phone_web_ysk
- active兼容处理 即 伪类 :active 失效

方法一:body添加ontouchstart

方法二:js给 document 绑定 touchstart 或 touchend 事件

a { }
a:active { }
{ }
bar

- 动画定义3D启用硬件加速

Element {
-webkit-transform:translate3d(0,0,0)
transform: translate3d(0,0,0);
}
在意:3D变形会消耗更加多的内存与耗能

- Retina屏的1px边框

Element{
border-width:thin;
}

- webkit mask 兼容处理

好几低档手提式有线电话机不协理css三 mask,能够选用性的降级管理。
比方能够应用js推断来引用区别class:
if(‘WebkitMask’indocument.documentElement.style){
alert(‘支持mask’);
}else{
alert(‘不支持mask’);
}

- 圆角bug

好几Android手提式有线电话机圆角失效
杀鸡取蛋方案:background-clip: padding-box;

- 顶部状态栏背景色

表明:除非你先使用apple-mobile-web-app-capable内定全屏情势,不然那几个meta标签不会起其余成效。
假诺content设置为default,则状态栏符合规律呈现。
若是设置为blank,则状态栏会有多个玛瑙红的背景。
借使设置为blank-translucent,则状态栏展现为浅蓝半晶莹剔透。
万一设置为default或blank,则页面展现在状态栏的江湖,即状态栏攻下上方部分,页面侵吞下方部分,2者未有屏蔽对方或被屏蔽。
假使设置为blank-translucent,则页面会充满荧屏,在那之中页面顶部会被状态栏遮盖住(会覆盖页面20px莫斯中国科学技术大学学,而iphone四和itouch四的Retina荧屏为40px)。
暗中同意值是default。

- 设置缓存

手提式有线电话机页面日常在首先次加载后会实行缓存,然后每一次刷新会动用缓存而不是去重新向服务器发送请求。
壹旦不指望选取缓存能够设置no-cache。

- 桌面图标

iOS下本着分化器材定义分化的桌面Logo。假设不定义则以当下显示屏截图作为Logo。
上边的写法可能大家会认为会有默许光泽,上面那种装置方法能够去掉光泽效果,还原设计图的作用!

图片尺寸能够设定为575柒(px)只怕Retina可以定为11411肆(px),ipad尺寸为72*72(px)

- 启动画面

iOS下页面运转加载时显得的镜头图片,制止加载时的白屏。
能够经过madia来钦命分歧的轻重缓急:

- 浏览器私有及其它meta

以下属性在类型中未有使用过,能够写三个demo测试以下!
//QQ浏览器私有
全屏情势

强制竖屏

强制横屏

应用方式

//UC浏览器私有
全屏情势

强制竖屏

强制横屏

使用格局

//其它
本最先持设备优化,首若是指向部分老的不识别viewport的浏览器,举例黑莓

微软的老一套浏览器

windows phone 点击无柔光

- IOS中input键盘事件keyup、keydown、keypress支持不是很好

主题材料是如此的,用input
search做模糊寻找的时候,在键盘里面输加入关贸总协定协会键词,会因此ajax后台查询,然后重回数据,然后再对回到的多少开始展览第3词标红。用input监听键盘keyup事件,在安卓手提式有线电话机浏览器中是能够的,可是在ios手提式有线电话机浏览器中变红相当的慢,用输入法输入之后,并未有立刻相应keyup事件,只有在通过删除之后本领相应!
化解办法:
可以用html伍的oninput事件去代替keyup

下一场就到达近似keyup的意义!

- h5网站input 设置为type=number的问题
  • h五网页input
    的type设置为number一般会生出三个难题,三个标题是maxlength属性不佳用了。
    此外一个是form提交的时候,暗许给取整了。3是局地安卓手提式有线电话机出现样式难点。

//问题一解决,我目前用的是js。如下
<input type="number"oninput="checkTextLength(this ,10)">
functioncheckTextLength(obj, length) {  
      if(obj.value.length > length)  {     
        obj.value = obj.value.substr(0, length);  
      } 
}
//问题二,是因为form提交默认做了表单验证,step默认是1,要设置step属性,假如保留2位小数,写法如下:
<input type="number"step="0.01"/>
关于step,我在这里做简单的介绍,input 中type=number,一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01。
假如step和min一起使用,那么数值必须在min和max之间。
看下面的例子:
<input type="number"step="3.1"min="1"/>
输入框可以输入哪些数字?
首先,最小值是1,那么可以输入1.0,第二个是可以输入(1+3.1)那就是4.1,以此类推,每次点击上下箭头都会增加或者减少3.1,输入其他数字无效。这就是step的简单介绍。
//问题三,去除input默认样式
input[type=number] {
  -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance:none;
  margin:0;
}
  • ios 设置input 按键样式会被私下认可样式覆盖

解决方式如下:
input,
textarea {
  border: 0; 
  -webkit-appearance: none; 
}
设置默认样式为none
  • select 下拉摘取安装右对齐

设置如下:
select option {
    direction: rtl;
}
  • 通过transform进行skew变形,rotate旋转会招致出现锯齿现象

可以设置如下:
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
 transform: rotate(-4deg) skew(10deg) translateZ(0);
 outline: 1px solid rgba(255,255,255,0)
  • 至于 iOS 与 OS X 端字体的优化(横竖屏会现出字体加粗不雷同等)

iOS 浏览器横屏时会重置字体大小,设置 text-size-adjust 为 none 可以解决 iOS 上的问题,
但桌面版 Safari 的字体缩放功能会失效,因此最佳方案是将 text-size-adjust 为 100% 。
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
  • 移步端 HTML伍 audio autoplay 失效难点

这个不是 BUG,由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放,必须由用户来触发才可以播放。
解决方法思路:先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。
document.addEventListener('touchstart',function() {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});
  • 移动端 HTML5 input date 不支持 placeholder 问题

这个我感觉没有什么好的解决方案,用如下方法
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">
  • 一些机型存在type为search的input,自带close开关样式修章

有些机型的搜索input控件会自带close按钮(一个伪元素),而通常为了兼容所有浏览器,我们会自己实现一个,此时去掉原生close按钮的方法为:
#Search::-webkit-search-cancel-button{
  display:none; 
}
如果想使用原生close按钮,又想使其符合设计风格,可以对这个伪元素的样式进行修改。
  • 唤起select的option展开

//zepto方式:
$(sltElement).trigger("mousedown");
//原生js方式:
functionshowDropdown(sltElement) {
  varevent;
  event = document.createEvent('MouseEvents');
  event.initMouseEvent('mousedown',true,true, window);
  sltElement.dispatchEvent(event);
};

上述全体素材收集整理自网络,如有不对的地点希望霎时告诉,迎接大家商讨指正,谢谢!

//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}

//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}

经测试发掘android弹出键盘时有三种效应:

一.将activity挤压,键盘也占壹部分activity空间;

二.键盘弹出在浏览器上面覆盖1层,不影响浏览器大小。

第3种会并发遮挡难题

澳门新萄京8522,    B、错误出现滚动条

   
在嬉戏内嵌页中冒出了不该出现的滚动条,而且内容并从未超过内容区宽度,经过测试overflow:hidden 无效,通过壹多种尝试利用古老的 <body
scroll=”no”> 写法消除,多尝试一下例外的写法和质量会有区别样的欢愉哦!

7.禁用PC端表单输入框私下认可清除按键

于是乎想到以下二种方案:

壹.经过动态日增页面高度设置scrollTop来使输入框达到合适的位置

2.设置相对牢固,通过top来使输入框达到合适的职位

19 往来缓存难点

点击浏览器的回退,有时候不会活动试行js,尤其是在mobilesafari中。那与来来往往缓存(bfcache)有关系。

解决方法 :window.onunload = function(){};

应用总括:

标题浅析及消除办法确立

最广大的是采纳多个艺术:scrollIntoViewIfNeeded()scrollIntoView(),使用方法自行百度。在本人那边不算。

    A、浏览器崩溃

var act = function(){
 window.removeEventListener('devicemotion',act);
};
window.addEventListener('devicemotion',act,false);

   
解绑函数写在了事件管理中程导弹致荣耀手提式无线电话机中的微信崩溃,那么大家不用将解绑时间写在事件管理中就能够。

打电话

问题

如图1个表单:

澳门新萄京8522 2

在有的android机型上测试点击靠下的输入框时碰到弹出的软键盘挡住输入框难点,ios可自个儿弹起(ios本身的调动偶尔也会出标题,举例第2方键盘会遮掩,原因是第①方输入法的tool
bar或许键盘也被作为可视区域,这里不做探讨)

九.iOS 系统汉语输入法输入英文时,字母之间恐怕会产出三个4分之1空格

能够经过正则去掉      this.value = this.value.replace(/\u2006/g, '');

 

1七.阻止旋转显示屏时自动调节字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

 

1一.在ios和andriod中,audio成分和video成分在无法自动播放

应对方案:触屏即播

$('html').one('touchstart',function(){
    audio.play()
})

参考

一. IOS平移端click事件300ms的推移响应

活动设备上的web网页是有300ms延迟的,玩玩会导致开关点击延迟以至是点击失效。那是出于区分单击事件和双击荧屏缩放的野史原因导致的,

2007年苹果发表第一个款式iphone上IOS系统搭载的safari为了将适用于PC端上海大学荧屏的网页能比较好的来得在手提式有线电话机端上,使用了双击缩放(double
tap to
zoom)的方案,比方你在手提式有线电话机上用浏览器打开2个PC上的网页,你只怕在看到页面内容即使可以撑满整个显示屏,然则字体、图片都异常的小看不清,此时得以连忙双击显示屏上的某一片段,你就能够看清该部分放大后的剧情,再度双击后能回去原来状态。

双击缩放是指用手指在显示器上快捷点击五次,iOS 自带的 Safari
浏览器会将网页缩放至原始比例。

原因就出在浏览器须求怎样判断连忙点击上,当用户在显示器上单击某3个要素时候,比如跳转链接<a
href=”#”></a>,此处浏览器会先捕获该次单击,但浏览器不能够调控用户是单独要点击链接或然要双击该有的区域拓展缩放操作,所以,捕获第三次单击后,浏览器会先Hold一段时间t,假若在t时间区间里用户未开始展览下三次点击,则浏览器会做单击跳转链接的拍卖,假使t时间里用户举办了第一次单击操作,则浏览器会禁止跳转,转而张开对该有的区域页面包车型地铁缩放操作。那么这一个时刻区间t有微微呢?在IOS
safari下,大约为300阿秒。那正是延迟的由来。造成的后果用户纯粹单击页面,页面需求过壹段时间才响应,给用户慢体验以为,对于web开拓者来讲是,页面js捕获click事件的回调函数管理,供给300ms后才生效,也就直接导致影响其余事情逻辑的管理。

消除方案:

fastclick能够化解在二弟大上点击事件的300ms延迟

zepto的touch模块,tap事件也是为着消除在click的推移难题

触摸事件的响应顺序为 touchstart –> touchmove –> touchend –>
click,也能够由此绑定ontouchstart事件,加快对事件的响应,解决300ms延迟难题

android用户点击一个链接,会油可是生叁个边框也许半晶莹剔透石青遮罩,
分歧生产商定义出来额效果不平等,可安装-webkit-tap-highlight-color的alpha值为0去除一些机器自带的功力

二.部分动静下对非可点击成分如(label,span)监听click事件,ios下不会接触,css扩充cursor:pointer就化解了。

input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear
{
display: none;
}

    A、古怪悬浮的表单

   
在一些android 机型中的输入框恐怕会现出如图古怪的剩余的浮出表单,经过侦察与测试开掘只有input:password类型的输入框存在,那么大家假使选拔input:text类型的输入框并通过体制-webkit-text-security:
disc; 隐藏输入密码从而消除。

 

1四  CSS动画页面闪白,动画卡顿

澳门新萄京8522 3

解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位
2.开启硬件加速

  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

澳门新萄京8522 4

.css{-webkit-appearance:none;}

二三. Zepto点透的减轻方案

zepto的tap是通过兼听绑定在document上的touch事件来成功tap事件的效仿的,及tap事件是冒泡到document上接触的,在点击实现时的tap事件(touchstart\touchend)供给冒泡到document上才会接触,而在冒泡到document此前,用户手的触发显示器(touchstart)和离开显示屏(touchend)是会触发click事件的,因为click事件有延迟触发(那就是为何移动端不用click而用tap的因由)(大概是300ms,为了兑现safari的双击事件的布署),所以在施行完tap事件未来,弹出来的选项组件马上就暗藏了,此时click事件还在延迟的300ms之中,当300ms到来的时候,click到的其实不是达成而是隐藏之后的下方的元素,若是正下方的成分绑定的有click事件此时便会触发,假如未有绑定click事件的话就当没click,然则正下方的是input输入框(或许select接纳框可能单选复选框),点击暗中认可集中而弹出输入键盘,也就出现了上面包车型大巴点透现象。

引进fastclick.js,在页面中进入如下js代码

1 window.addEventListener( "load", function() {
2     FastClick.attach( document.body );
3 }, false );

也许有zepto只怕jQuery的js里面加多

1 $(function() {
2     FastClick.attach(document.body);
3 });

理所当然require的话就那样:

1 var FastClick = require('fastclick');
2 FastClick.attach(document.body, options);

方案2:用touchend代替tap事件并阻挠掉touchend的暗许行为preventDefault()

1 $("#cbFinish").on("touchend", function (event) {
2     //很多处理比如隐藏什么的
3     event.preventDefault();
4 });

方案3:延迟一定的光阴(300ms+)来处监护人件

1 $("#cbFinish").on("tap", function (event) {
2     setTimeout(function(){
3     //很多处理比如隐藏什么的
4     },320);
5 });    

 2四.
user-select:none;形成一加伍上输入框的光标不显得,而光标不显得形成不能够连接输入。

参考《border-radius
移动之伤》

13.android下撤废输入语音开关

input::-webkit-input-speech-button {display: none}
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check
{
display: none;
}

    C、无法同时播报多音频

   
在android设备中,播放后一音频会打断前一音频,而不会联手播报,那一个是现阶段系统资深决定的,大家只有应用优雅降权的法子让android选取区别风格的韵律前后切换播放而不是还要播报,达到与预期接近的节拍效果。

 

四. h玖底部输入框被键盘遮挡难题

h伍页面有个很蛋疼的标题便是,当输入框在最尾巴部分,点击软键盘后输入框会被挡住。可利用如下格局解决

澳门新萄京8522 5

var oHeight = $(document).height(); //浏览器当前的高度

   $(window).resize(function(){

        if($(document).height() < oHeight){

        $("#footer").css("position","static");
    }else{

        $("#footer").css("position","absolute");
    }

   });

  关于Web移动端Fixed布局的化解方案,那篇文章也不利

http://efe.baidu.com/blog/mobile-fixed-layout/

澳门新萄京8522 6

 

三. 苹果手提式有线话机遮罩层下的input、select、a等要素得以被点击和focus(点击穿透)

主题素材意识于苹果手提式有线电话机,这几个在一定供给下才会有,由此1旦未有接近难题的能够不看。首先须要是浮层操作,在三星(Samsung)上被遮罩的因素依旧能够博得focus、click、change),有二种缓慢解决方案,

一.是因而层展现以往加入相应的class名调控,截断突显层下得以得到关节成分的风云获得

二.是通过将可获取关节成分参预的disabled属性,也能够动用属性加dom锁定的章程(disabled的壹种转移格局)

  • 尽可能地利用合成属性transform和opacity来设计CSS三动画,不选拔position的left和top来恒定
  • 利用translate3D开启GPU加速

    A、页面中度渲染错误

   
在各移动端浏览器中时常会现出这种页面中度百分之百的渲染错误,页面低级和连串自带的导航条重合了,高度的不科学大家须要重新设置校正它,通过javascript代码复位掉:

document.documentElement.style.height = window.innerHeight + 'px';

可参考《心中无数自动播放的audio成分》

8.消除 transition 闪屏

-webkit-transform-style: preserve-3d;     /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-backface-visibility: hidden;      /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/

《运动端web页面使用position:fixed难题计算》

1二.ios下取消input在输入的时候英文首字母的私下认可大写

<input autocapitalize="off" autocorrect="off" />

ios可以,android不行~

六.禁止 iOS 识别长串数字为电话

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

18.撤废input在ios下,输入的时候英文首字母的默许大写

1八 Input 的placeholder会出现文本地点偏上的景观

input
的placeholder会现身文本地点偏上的景况:PC端设置line-height等于height能够对齐,而移动端还是是偏上,化解是安装line-height:normal

input::-webkit-input-speech-button {display: none}

20. calc的包容性处理

CSS3中的calc变量在iOS六浏览器中务必加-webkit-前缀,近年来的FF浏览器已经不供给-moz-前缀。
Android浏览器方今照例不补助calc,所以要在前头扩充1个保守尺寸:

div { 
    width: 95%; 
    width: -webkit-calc(100% - 50px); 
    width: calc(100% - 50px); 
}
  • 可用isroll.js,暂无完美方案

七.禁止 iOS 弹出各个操作窗口

-webkit-touch-callout:none

二.部分android系统桐月素被点击时发出的边框怎么去掉

    B、:active 效果不合作

    在android 四.0本子以下CSS
:active伪状态效果不可能合作,大家给该因素的touch连串的风云(touchstart/touchend/touchmove)绑定2个空佚名方法:

var element=document.getElementsById(”btnShare”);
element.addEventListener(‘touchstart’,function(){},false);
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

五.不让 Android 手机识别邮箱

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

17.消除transition闪屏

    D、不协理部分滚动

    在android
4.0本子以下在body(html)成分之外的要素 overflow:scroll 样式设置滚动条无效,这里有二种缓慢解决方案:

    壹、巧用布局直接设置样式滚动条在body(html)上,其他因素“错觉滚动”。

    2、利用iscroll、自写js控制translate、scrollTop模拟

《选取iScroll.js化解ios肆下不帮忙position:fixed的主题材料》

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图