手机端页面在项目中遇到的一些问题及解决办法

2018-06-21 10:33:00 3332 1 编辑:深正互联 来源:互联网

网站建设

1.解决页面使用overflow: scroll在ios上滑动卡顿的问题?

首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。

解决方案是:

(1) 看是否能把body和html的height: 100%去除掉。

(2) 在滚动的容器中增加:-webkit-overflow-scrolling: touch或者给body增加:body {overflow-x: hidden}。

2.ios页面橡皮弹回效果遮挡页面选项卡?

(1) 有时body和html的height: 100%去除掉问题可能就没有了。

(2) 到达临界值的时候在阻止事件默认行为

var startY,endY;

//记录手指触摸的起点坐标

$('body').on('touchstart',function (e) {

startY = e.touches[0].pageY;

});

$('body').on('touchmove',function (e) {

endY = e.touches[0].pageY; //记录手指触摸的移动中的坐标

//手指下滑,页面到达顶端不能继续下滑

if(endY>startY&& $(window).scrollTop()<=0){

e.preventDefault();

}

//手指上滑,页面到达底部能继续上滑

if(endY<startY&& $(window).scrollTop()+

$(window).height()>=$('body')[0].scrollHeight){

e.preventDefault();

}

})

有时也会碰见弹窗出来后两个层的橡皮筋效果出现问题,我们可以在弹出弹出时给底层页面加上一个类

名,类名禁止页面滑动这样下层的橡皮筋效果就会被禁止,就不会影响弹窗层。

3.IOS机型margin属性无效问题?

(1) 设置html body的高度为百分比时,margin-bottom在safari里失效

(2) 直接padding代替margin

4.Ios绑定点击事件不执行?

(1)添加样式cursor :pointer。点击后消除背景闪一下的css:-webkit-tap-highlight-color:transp

arent;

5.Ios键盘换行变为搜索?

这时 "换行" 已经变成 “前往”。

如果想变成 “搜索”,input 设置 type="search"。

6.ios对position: fixed不太友好,有时我们需要加点处理?

在安卓上面,点击页面底部的输入框,软键盘弹出,页面移动上移。

而ios上面,点击页面底部输入框,软键盘弹出,输入框看不到了.查资料说什么的都有,iscroll,j

query-moblie,absolute,fixe,static都非常复杂,要改很多。

6.让他弹出时让滚动条在最低部

var u = navigator.userAgent, app = navigator.appVersion;

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

if (isiOS) {

$('textarea').focus(function () {

window.setTimeout('scrollBottom()', 500);

});

}

function scrollBottom() {

window.scrollTo(0, $('body').height());

}

7.transform属性影响position:fixed?

(1)规范中有规定:如果元素的transform值不为none,则该元素会生成包含块和层叠上下文。CSS Transforms Module Level 1不只在手机上,电脑上也一样。除了fixed元素会受影响之外,z-index(层叠上下文)值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果transform元素的display值为inline时又会有所不同。最简单的解决方法就是transform元素内部不能有absolute、fixed元素。

8.有时因为服务器或者别的原因导致页面上的图片没有找到?

这是我们想需要用一个本地的图片代替没有找的的图片

<script type="text/javascript">

function nofind(){

var img=event.srcElement;

img.src="images/logoError.png";

img.onerror=null; 控制不要一直跳动

}

</script>

<img src="images/logo.png" onerror="nofind();" />

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通