贵妇献女双飞怀孕了

鄭州網站優化

,鄭州seo,鄭州百度優化,鄭州網絡推廣,選擇路普科技,10年為企業網站優化助力!


您當前位置:首頁 > 營銷百科 > 手機版SEO優化 >

手機端頁面開發過程中經常碰到的一些問題

發布時間:2021-08-04 標簽:【鄭州劉寨】 瀏覽量:

手機端頁面開發過程中經常碰到的一些問題

對于前端開發者來說手機端存在著很多的挑戰,手機端頁面開發過程中會碰到各種各樣千奇百怪的問題,那么今天我為大家分享手機端頁面開發過程中的一些問題和解決問題的方法技巧。

手機端頁面在不同設備、不同操作系統、不同運行環境下都可能造成各種各樣的沒有碰到過的的坑,相比曾經的IE6來說,現在的問題要多了很多。

現在的前端開發者基本都要同時著手PC端頁面和手機頁面的開發工作,就目前的狀況來看,手機頁面的兼容性要比PC端更為復雜(當然主要是只在android端,大家懂的),而且有些樣式在PC端頁面上可能沒什么,但是一旦到了手機頁面,那就有可能是“大坑”,下面是本人自己開發手機頁面過程中總結的一些問題,在此借助鄭州seo公司老秦博客的平臺跟大家分享一下,避免以后再次去犯。

1、外觀

訪問者對網站的第一印象就是網頁的外觀,一個好的網頁外觀能帶給人絕妙的視覺效果,視覺效果好的頁面背景,可以為網站起到錦上添花的作用,還可能讓訪問者對網站留下深刻的印象(具體可查看鄭州seo公司老秦博客《手機端界面設計的8個優化要點》的相關介紹)。

A、頁面高度渲染錯誤

在各手機端瀏覽器中經常會出現這種頁面高度100%的渲染錯誤,頁面低端和系統自帶的導航條重合了,高度的不正確我們需要重置修正它,通過javascript代碼重置掉:

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

B、疊加區高亮

在部分android機型中點擊頁面某一塊區域可能會出現如圖所示的黃色框秒閃,這是部分機型系統自身的默認定制樣式,給該元素一個CSS樣式重置掉:

-webkit-tap-highlight-color:rgba(0,0,0,0);

2、行為

關于行為方面,我這里主要跟大家分享一下事件無法被觸發和active效果不兼容的問題:

A、事件無法被觸發

在部分android機型的微信環境中會出現事件無法觸發、表單無法輸入的情況,我們針對需要輸入或者觸發事件的元素設置樣式:-webkit-transform: translate3d(0,0,0) ,不過新版本的微信已經直接修復了該問題。

B、:active 效果不兼容

在android 4.0版本以下CSS :active偽狀態效果無法兼容,我們給該元素的touch系列的事件(touchstart/touchend/touchmove)綁定一個空匿名方法:

var element=document.getElementsById(”btnShare”);
element.addEventListener(‘touchstart’,function(){},false);

3、應用

在開發面向現代智能手機的手機Web應用的時候,無法避免一個事實,就是需要開發頁面應用,對于不同的系統需求,頁面應用的粒度會不同,可能是整個系統都使用一個頁面裝載,也可能是按模塊分為獨立頁面裝載,對此,我們也不妨來看一下在應用過程中經常遇到的一些問題及解決方法:

A、瀏覽器崩潰

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

解綁函數寫在了事件處理中導致小米手機中的微信崩潰,那么我們不要將解綁時間寫在事件處理中即可。

B、預加載、自動播放無效

如上表所示,經過簡單的測試發現預加載、自動播放的有效性受操作系統、瀏覽器(webview)、版本等的影響,蘋果官方規定必須由用戶手動觸發才會載入音頻,那么我們捕捉一次用戶輸入后,讓音頻加載實現預加載:

//play and pause it once
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});

C、無法同時播放多音頻

在android設備中,播放后一音頻會打斷前一音頻,而不會同步播放,這個是目前系統資深決定的,我們只有采取優雅降權的方法讓android選擇不一樣風格的音頻前后切換播放而不是同時播放,達到與預期接近的音頻效果。

D、不支持局部滾動

在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 樣式設置滾動條無效,這里有兩種解決方案:

①、巧用布局直接設置樣式滾動條在body(html)上,其他元素“錯覺滾動”。

②、利用iscroll、自寫js控制translate、scrollTop模擬。

4、系統/硬件

關于系統或硬件方面,我主要碰到以下幾個問題,在此,也簡單的跟大家描述一下,并提供一下解決方法:

A、怪異懸浮的表單

在部分android 機型中的輸入框可能會出現如圖怪異的多余的浮出表單,經過觀察與測試發現只有input:password類型的輸入框存在,那么我們只要使用input:text類型的輸入框并通過樣式-webkit-text-security: disc;隱藏輸入密碼從而解決。

B、錯誤出現滾動條

在游戲內嵌頁中出現了不應該出現的滾動條,而且內容并沒有超出內容區寬度,經過測試overflow:hidden無效,通過一系列嘗試使用古老的 <body scroll=”no”> 寫法解決,多嘗試一下不同的寫法和屬性會有不一樣的驚喜哦!

C、鏈接打開系統瀏覽器

在游戲內webview的部分android機型中可能會出現點擊鏈接調用系統瀏覽器的情況,這是一個非常不好的體驗,那么我們嘗試給這個元素添加 target=”_blank” 屬性有可能解決,如果還不能解決那么需要修改IOS或android原生系統函數了。

D、Flex box 不兼容

在游戲內嵌webview中碰到Flex box布局不兼容的情況,圖中所示下面部分的導航錯位了,雖然之前有仔細查看過Flex box的兼容性,但是在游戲內嵌頁中無法確定其調用的系統瀏覽器版本及兼容,導致錯誤,所以我們寫完整歷史版本的3種Flex box解決,那么我們思考在寫頁面過程中還是本著保守穩定的方式書寫樣式可以減少一些不必要的麻煩。

5、代碼屬性的問題

在手機端頁面開發過程中,由于技術還不夠完善和穩定,我們也經常會因為代碼屬性的問題導致頁面出現很多千奇百怪的問題,這也是開發人員最為煩惱的問題,在此,鄭州seo公司老秦也分享幾個常見的問題:

(1)、overflow-x

這真的是一個大坑,一旦你在body或者html上用了這個屬性,對不起,如果你的頁面出現滾動條的話,那就會出現莫名其妙的bug,滑動頁面的時候fix在頂部或者底部的會擋住,不知道有人遇到這樣的情況沒有,我是遇到了,坑死了。

解決辦法:html跟body不要使用這個屬性,如果不想讓橫向出現滾動,就用overflow:hidden;overflow-y:auto;

(2)、calc()

這個本就是css3中的新方法,用起來其實是很爽的,無奈android不支持,大家最好別用,除非你不考慮android用戶。

(3)、display:fix

這個是css3的新屬性,用來做彈性布局的,ios上是十分OK的,然而android不支持,為了不被坑,別用。

(4)、-webkit-overflow-scrolling:touch

這個屬性不是坑,他是用來讓ios上的滾動條更加順滑流暢的,親測android上沒有啥大的變化,但是ios有,不算坑,為了增強用戶體驗,大家可以用上,給出現滾動條的標簽加上這個樣式。

(5)、jquery中的html()方法

如果input的type為tel類型,然后你用html()方法取出某個值填入這個input,這個input在android手機上會顯示諸如”<a href="faketel:****"></a>“類似的字符竄。

解決辦法就是用text()方法去取這個值然后填入這個input中,說白了還是html()跟text()方法的用法不一樣,html()方法取的是html的內容,并非是純文本,而text()方法取出的是純文本,不會被瀏覽器解析,算是一個教訓!

(6)、keyup和keydown在IOS設備上失效

如果你在IOS設備上用第三方輸入法是無法用keyup事件來監聽的,因為ios系統做了屏蔽機制,第三方輸入法的事件系統是不管的,那么我們可以換種思路,去監聽input的值變化事件,替換方案如下:

$('#input').bind('input propertychange', function() {
                alert("....")
            });

(7)、給body加position:relative

比如給手機頁面做個彈幕的效果,在body里面會有個div一直滾動,從右向左,然后這個div是absolulte的,那一定要給body加relative,否則ios的手機會出現橫向滾動條。

7、學會如何去解決問題

面對這么多坑,還有各種各樣已經的和未知的坑,時間上也不可能一一講完,更不可能都已經有解決方案,我們需要學會如何去解決這些問題。

解決坑首先自己需要有個強有力的執行力,通過不斷去嘗試來探索未知的問題,那么一般我們會通過哪些方式哪些步驟和技巧來嘗試呢?

(1)、定位問題

首先我們需要定位問題,我們可以使用下列方法:

A、DOM隔離定位法

不斷由大范圍到小范圍隔離出DOM,從而找出、觸發問題的DOM元素。

B、樣式、JS剔除法

不斷剔除一些JS、CSS觀察調試檢查是否是由部分JS、CSS屬性引起問題。

C、多運行環境測試法

在多環境中測試,排查是否是由于特定環境引起(具體可查看鄭州seo公司老秦博客《手機端設備前端開發調試的方法技巧》的相關介紹)。

D、PC與手機聯合調試法

聯合PC與手機進行定位,如:通過Mac遠程調試iPhone/iPad。

(2)、解決問題的方式

我們解決問題可以嘗試如下的方式:

* 嘗試、轉思維、繞解決

* 優雅降權、區分處理、溝通

* 搜索與提問……

和以下的思維:

* 替代

* 繞道

* 分割……

(3)、學會解決問題

在解決問題的過程中我們需要學會利用搜索和溝通資源解決問題:

A、google、百度

B、行業博客及社區

C、同事、朋友、QQ群、論壇等。

搜索引擎和行業博客及社區讓你更容易更精確的快速搜索出問題相關的資料,同時、朋友QQ群、論壇等讓你可以直接的跟人溝通出別人所遇到的問題及解決方案。

(4)、學會如何總結問題

在發現、解決問題后,更重要的是要學會如何總結問題:

A、總結記錄問題產生條件、解決方法和解決過程。

B、盡可能分析原理、產生的條件,避免重蹈覆轍。

C、分享給更多的人。

無窮無盡的坑,走的人多了,總結分享的多了,坑也就越來越平了。

我在總結記錄問題的同時,整理了一個手機端小貼士,記錄問題與一些坑,雖然目前還不完善但是希望能分享給更多的人也希望更多的人能參與完善。

鄭州seo公司老秦博客點評:

對于手機端網頁,用戶體驗始終是大問題,交互式使用好的客戶端可以在很多方面給用戶帶來不同的感覺和享受,因此,重視手機端的用戶體驗,就可以給客戶端增加很多意想不到的功能,這樣賦予這種軟件其他的不同凡響,漸漸的就能讓用戶越積越多,這樣才是交互功能一種好的體現。

版權聲明:本站部分文章,由 鄭州路普科技整理發表(信息來自互聯網,不代表本站觀點),如有冒犯請聯系我們
網頁標簽:【鄭州劉寨】
服務城市
歡迎致電或者QQ咨詢路普公司,我們專注企業網站優化服務!
提供網站優化、關鍵詞排名、企業網站優化、SEO整站優化、站內站外優化等網站優化服務!

電話:0371-87535353
地址:鄭州市花園路59號21世紀新樓中樓1#8001 豫ICP備10210721號-4
鄭州網站優化,鄭州網站優化公司,鄭州關鍵詞優化,鄭州關鍵詞排名,鄭州百度優化專業的網絡公司,助力企業快速提升目標客戶轉化率
网站地图