成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動web開發(fā)問題和經(jīng)驗總結(jié)

Wildcard / 1419人閱讀

摘要：的事件默認綁在上的抓包瀏覽器連接安卓機測試實用網(wǎng)站適配測試兼容性網(wǎng)站前端開發(fā)雅虎條優(yōu)化準則

前言

這里大部分是自己遇到過的情況，還有一部分借鑒了同行的文章，如果大家有遇到其它坑，歡迎提出來一起研究。

知識要點 1. Meta標簽

1.禁止用戶縮放頁面，頁面強制讓文檔的寬度與設備的寬度保持1:1

2.禁止ios上自動識別電話

3.禁止android上自動識別郵箱

4.針對ios上的safari上地址欄和頂端樣式條的
2. JS和jquery獲取各種屏幕的寬度和高度的代碼 
// Javascript:
網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁可見區(qū)域高： document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)
網(wǎng)頁正文全文寬： document.body.scrollWidth
網(wǎng)頁正文全文高： document.body.scrollHeight
網(wǎng)頁被卷去的高： document.body.scrollTop
網(wǎng)頁被卷去的左： document.body.scrollLeft
網(wǎng)頁正文部分上： window.screenTop
網(wǎng)頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度： window.screen.availWidth

// Jquery：
$(document).ready(function(){
　　alert($(window).height()); //瀏覽器當前窗口可視區(qū)域高度
　　alert($(document).height()); //瀏覽器當前窗口文檔的高度
　　alert($(document.body).height());//瀏覽器當前窗口文檔body的高度
　　alert($(document.body).outerHeight(true));//瀏覽器當前窗口文檔body的總高度 包括border padding margin
　　alert($(window).width()); //瀏覽器當前窗口可視區(qū)域?qū)挾?　　alert($(document).width());//瀏覽器當前窗口文檔對象寬度
　　alert($(document.body).width());//瀏覽器當前窗口文檔body的寬度
　　alert($(document.body).outerWidth(true));//瀏覽器當前窗口文檔body的總寬度 包括border padding margin
})
3. 打電話發(fā)短信 
打電話給:020-88888888
發(fā)短信給: 911
4. 圖片優(yōu)化

1.base64編碼圖片替換url圖片;

2.圖片壓縮，提供一個網(wǎng)站用于壓縮;

3.圖片懶加載；

4.img和background

img：html中的標簽img是網(wǎng)頁結(jié)構(gòu)的一部分會在加載結(jié)構(gòu)的過程中和其他標簽一起加載；

background：以css背景圖存在的圖片background會等到結(jié)構(gòu)加載完成（網(wǎng)頁的內(nèi)容全部顯示以后）才開始加載；

so，網(wǎng)頁會先加載標簽img的內(nèi)容，再加載背景圖片background引用的圖片
5. H5禁止手機屏幕橫屏的變相操作

移動設備上的頁面，當屏幕旋轉(zhuǎn)的時候會有一個orientationchange事件，可以給body元素增加此事件的監(jiān)聽：

進入監(jiān)聽方法中，通過window。orientation來獲取當前屏幕的狀態(tài)：

0 --- 豎屏

90 --- 逆時針旋轉(zhuǎn)橫屏

-90 --- 順時針旋轉(zhuǎn)橫屏

180 --- 豎屏，上下顛倒

解決方法：

1.你可以在設備旋轉(zhuǎn)時間監(jiān)聽里面對body使用CSS3里面的transition中的旋轉(zhuǎn)來保持頁面豎向；

2.此方法只適用于安卓手機
技巧與必知 1. 原生js的事件監(jiān)聽和jquery的事件綁定在ios中失效：

使用事件監(jiān)聽或事件綁定時，由于父元素選擇body或document元素，導致在ios中事件觸發(fā)無效，所以不使用body和document元素作為父級元素。

2. navigator.onLine兼容性問題，需謹慎使用； 3. ios中日期顯示為NaN：

Date的日期格式，在ios中有兼容性問題，ios的日期會顯示成：NaN;

解決方法：在ios中支持"2017/12/26 19:36:00"，而不支持"2017-12-26 19:36:00"格式，后面一種格式，在ios中顯示Nan （Android中都可以顯示正常）

4. 移動端1px的問題:

由于不同的手機有不同的像素密度,css中的1px并不等于移動設備的1px。項目中使用js和rem做移動端的屏幕適配，所以產(chǎn)生0.5px的情況，導致低版本的手機展示不了0.5px的邊框。

解決方法：使用css解決1px的問題，并且給需要設置成1px的dom元素直接寫上：border-width:1px;

5. 頁面滾動條問題：

web頁面在PC瀏覽器上瀏覽時有滾動條；但是，在移動端瀏覽器打開時，沒有滾動條

解決方法：將頁面的最外層(我一般在寫頁面時，會在body標簽內(nèi)寫一個大容器，用于存放頁面的內(nèi)容)設置overflow:auto/scroll;并且不能設置height屬性的值(height:100%也不行)

6. 長按閃退的問題:

列表頁的列表項時(觸摸到文字)，在低版本手機中會出現(xiàn)閃退的情況

解決方法：

js部分：在事件觸發(fā)時添加e.preventDefault();，用于阻止默認行為
css部分：添加禁止文本文本復制的代碼 -webkit-touch-callout: none; user-select: none;

7. ios中，除body外的局部滾動，會出現(xiàn)卡頓問題

解決方案：在要滾動元素上加上

-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
8. 在ios上，input默認樣式和表單的disabled屬性帶來的重影樣式

1.去掉input的默認樣式

input,button,textarea{-webkit-appearance: none;}

2.因為ios默認了disabled屬性時透明度為0.8，解決：

input:disabled, input[disabled]{ -webkit-opacity:1; opacity: 1; }
9. 慎用fixed布局

css中position: fixed定位會因為其父元素上可能設置了transform屬性而失效。

微信端 1. 安卓在微信端不能使用window.location.reload()

解決方法：使用url地址后加隨機數(shù)來解決

2. ios下的微信頁面背景音樂無法自動播放問題

這個問題我有遇到過，然后網(wǎng)上了找了解決方法，但是沒有效果，所以只能改用開始移動播放音樂。

Other

zepto的scroll事件默認綁在window上的

app抓包

瀏覽器連接安卓機測試

實用網(wǎng)站

flexible適配

測試兼容性網(wǎng)站

前端開發(fā)

雅虎36條優(yōu)化準則

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93709.html

相關文章

  • 移動web開發(fā)問題和經(jīng)驗總結(jié)

    摘要：的事件默認綁在上的抓包瀏覽器連接安卓機測試實用網(wǎng)站適配測試兼容性網(wǎng)站前端開發(fā)雅虎條優(yōu)化準則 前言 這里大部分是自己遇到過的情況，還有一部分借鑒了同行的文章，如果大家有遇到其它坑，歡迎提出來一起研究。 知識要點 1. Meta標簽 1.禁止用戶縮放頁面，頁面強制讓文檔的寬度與設備的寬度保持1:1 2.禁止ios上自動識別電話 3.禁止android上自動識別郵箱 4.針對ios上的...

    MorePainMoreGain 評論0 收藏0

  • 移動web開發(fā)問題和經(jīng)驗總結(jié)

    摘要：的事件默認綁在上的抓包瀏覽器連接安卓機測試實用網(wǎng)站適配測試兼容性網(wǎng)站前端開發(fā)雅虎條優(yōu)化準則 前言 這里大部分是自己遇到過的情況，還有一部分借鑒了同行的文章，如果大家有遇到其它坑，歡迎提出來一起研究。 知識要點 1. Meta標簽 1.禁止用戶縮放頁面，頁面強制讓文檔的寬度與設備的寬度保持1:1 2.禁止ios上自動識別電話 3.禁止android上自動識別郵箱 4.針對ios上的...

    yexiaobai 評論0 收藏0

  • 前端每周清單半年盤點之 React 與 ReactNative 篇

    摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構(gòu)建工具由遷移到，引發(fā)了很多開發(fā)者的討論。 前端每周清單半年盤點之 React 與 ReactNative 篇 前端每周清單專注前端領域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為...

    Barry_Ng 評論0 收藏0

  • 3年軟件測試經(jīng)驗突顯迷茫...不知道我這種測試人員是不是被淘汰？??

    這兩天和朋友談到軟件測試的發(fā)展：這一行的變化確實蠻大，從開始最基礎的功能測試，到現(xiàn)在自動化、性能、安全乃至于以后可能出現(xiàn)的大數(shù)據(jù)測試、AI測試崗位需求逐漸增多。我也在軟件測試這行摸爬滾打了十年了，正好有朋友問我：如何快速成為互聯(lián)網(wǎng)時代優(yōu)秀的測試工程師呢？趁著最近終于有了些閑余時間，遂總結(jié)了下自動化測試的成長線路圖和職業(yè)必備技能，希望可以幫助各位少走彎路、破繭成蝶、邁向成功。 下面我來分享下自動化測...

    fasss 評論0 收藏0

發(fā)表評論

0條評論

Wildcard

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<