手機端頁面在項目中遇到的一些問題及解決辦法

2018-06-21 1014 0 編輯:深正互聯 來源:互聯網

網站建設

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();" />

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾 10000捕鱼游戏平台 109赚钱还是69 14场足球彩票比分直播 山西扣点点怎么胡牌快 拿钱投商铺赚钱吗 世界杯竞猜即时赔率 fut 快速赚钱 澳盘即时赔率新浪 费时间赚钱的手游 甘肃十一选五 开拼多多店群赚不赚钱 bet007足球比分 免费麻将下载安装 云南时时彩 茅台葡萄酒赚钱吗 天门赖子麻将一赖到底