這些移動端WEB開發的常見問題你知道幾個-WEB前端

這些移動端WEB開發的常見問題你知道幾個-WEB前端知識

、移動端如何定義字體font-family

三大手機系統的字體：

ios 系統

默認中文字體是Heiti SC

默認英文字體是Helvetica

默認數字字體是HelveticaNeue

無微軟雅黑字體

android 系統

默認中文字體是Droidsansfallback

默認英文和數字字體是Droid Sans

無微軟雅黑字體

winphone 系統

默認中文字體是Dengxian(方正等線體)

默認英文和數字字體是Segoe

無微軟雅黑字體

各個手機系統有自己的默認字體，且都不支持微軟雅黑

如無特殊需求，手機端無需定義中文字體，使用系統默認

英文字體和數字字體可使用 Helvetica ，三種系統都支持

* 移動端定義字體的代碼 */

body{font-family:Helvetica;}

2、移動端字體單位font-size選擇px還是rem

對于只需要適配手機設備，使用px即可

對于需要適配各種移動設備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備

rem配置參考：

3、什么是Retina 顯示屏，帶來了什么問題

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變為多個，如在同樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變為4個

在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計為傳統PC的2倍

那么，前端的應對方案是：

設計稿切出來的圖片長寬保證為偶數，并使用backgroud-size把圖片縮小為原來的1/2

//例如圖片寬高為：200px*200px，那么寫法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px

.css{font-size:20px}

4、viewport模板

5. 優先使用最新版本 IE 和Chrome

6. 添加到主屏后的標題（IOS）

7. 啟用 WebApp 全屏模式（IOS）

當網站添加到主屏幕后再點擊進行啟動時，可隱藏地址欄（從瀏覽器跳轉或輸入鏈接進入并沒有此效果）

8. 百度禁止轉碼

通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，非常之惡心。不過我們可以通過這個meta標簽來禁止它：

10. 設置狀態欄的背景顏色（IOS）

設置狀態欄的背景顏色，只有在 "apple-mobile-web-app-capable"content="yes" 時生效

<metaname="apple-mobile-web-app-status-bar-style"content="black-translucent" />

content 參數：

default ：狀態欄背景是白色。

black ：狀態欄背景是黑色。

black-translucent：狀態欄背景是半透明。如果設置為default 或 black ,網頁內容從狀態欄底部開始。如果設置為black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

11. 移動端手機號碼識別（IOS）

在 iOS Safari （其他瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理為電話鏈接，比如：

7位數字，形如：1234567

帶括號及加號的數字，形如：(+86)123456789

雙連接線的數字，形如：00-00-00111

11位數字，形如：13800138000

可能還有其他類型的數字也會被識別。我們可以通過如下的meta來關閉電話號碼的自動識別：

開啟電話功能

開啟短信功能：

12. 移動端郵箱識別（Android）

與電話號碼的識別一樣，在安卓上會對符合郵箱格式的字符串進行識別，我們可以通過如下的meta來管別郵箱的自動識別：

同樣地，我們也可以通過標簽屬性來開啟長按郵箱地址彈出郵件發送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

13、ios系統中元素被觸摸時產生的半透明灰色遮罩怎么去掉

ios用戶點擊一個鏈接，會出現一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設置為0就可以去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)}

14、部分android系統中元素被點擊時產生的邊框怎么去掉

android用戶點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果

a,button,input,textarea{

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

-webkit-user-modify:read-write-plaintext-only;

}

-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字符

另外，有些機型去除不了，如小米2

對于按鈕類還有個辦法，不使用a或者input標簽，直接用div標簽

15、winphone系統a、input標簽被點擊時產生的半透明灰色背景怎么去掉

16、webkit表單元素的默認外觀怎么重置

.css{-webkit-appearance:none;}

17、webkit表單輸入框placeholder的顏色值能改變么

input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

18、webkit表單輸入框placeholder的文字能換行么

ios可以，android不行~

19. 關閉iOS鍵盤首字母自動大寫

在iOS中，默認情況下鍵盤是開啟首字母大寫的功能的，如果啟用這個功能，可以這樣：

20. 關閉iOS輸入自動修正

和英文輸入默認自動首字母大寫那樣，IOS還做了一個功能，默認輸入法會開啟自動修正輸入內容，這樣的話，用戶經常要操作兩次。如果不希望開啟此功能，我們可以通過input標簽屬性來關閉掉：

21. 禁止文本縮放

當移動設備橫豎屏切換時，文本的大小會重新計算，進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：

html {

　　 -webkit-text-size-adjust: 100%;

}

需要注意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設置 `meta viewport’。

22. 移動端如何清除輸入框內陰影

在iOS上，輸入框默認有內部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關閉：

23.屏幕旋轉的事件和樣式

window.orientation，取值：正負90表示橫屏模式、0和180表現為豎屏模式；

24.audio元素和video元素在ios和andriod中無法自動播放

應對方案：觸屏即播

$('html').one('touchstart',function(){

audio.play()

})

25.搖一搖功能

HTML5deviceMotion：封裝了運動傳感器數據的事件，可以獲取手機運動狀態下的運動加速度等數據。

26.手機拍照和上傳圖片

使用總結：

ios 有拍照、錄像、選取本地圖片功能

部分android只有選取本地圖片功能

winphone不支持

input控件默認外觀丑陋

27. 消除transition閃屏

.css{

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

}

開啟硬件加速

解決頁面閃白

保證動畫流暢

設計高性能CSS3動畫的幾個要素

盡可能地使用合成屬性transform和opacity來設計CSS3動畫，

不使用position的left和top來定位

利用translate3D開啟GPU加速

28.android 上去掉語音輸入按鈕

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

29.模擬按鈕hover效果

移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，但是移動設備中并沒有鼠標指針，使用css的hover并不能滿足我們的需求，還好國外有個激活css的active效果，代碼如下，

框架

1. 移動端基礎框架

zepto.js 語法與jquery幾乎一樣，會jquery基本會zepto~

iscroll.js 解決頁面不支持彈性滾動，不支持fixed引起的問題~ 實現下拉刷新，滑屏，縮放等功能~

underscore.js 該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。

fastclick 加快移動端點擊響應時間

animate.css CSS3動畫效果庫

Normalize.css Normalize.css是一種現代的、CSS reset為HTML5準備的優質替代方案

2. 滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁面的效果

slip.js

iSlider.js

fullpage.js

swiper

3.瀑布流框架

masonry

工具推薦

caniuse 各瀏覽器支持html5屬性查詢

paletton 調色搭配

)JavaScript簡介

JavaScript:是一種腳本語言(程序),腳本是一條條的文字命令,執行時由系統的一個解釋器將其一條條的翻譯成機器可識別的指令然后執行,腳本語言是不經編譯而是解釋執行的,便于快速開發或一些輕量的控制,是一種在瀏覽器端執行的腳本語言;JavaScript是一種可以跨平臺運行的動態的腳本語言(比如ASP,PHP,JSP等),只要支持JS的瀏覽器都支持JavaScript(現今幾乎全支持)

作用:在瀏覽器中執行一些簡單的運算,判斷以減輕對服務器端的壓力,但是從瀏覽器端采集的數據在服務器端也要進行檢測判斷

2)JavaScript的組成：

JavaScript基本由以下3部分組成：

2.1ECMAScript(基本語法):包括語法,關鍵字,保留字,類型,語句,運算符,對象

2.2Dom文檔對象模型(封裝好的一些函數庫)在html與xml中都是用dom;Xml與html的應用程序接口(api)

2.3Bom瀏覽器對象模型:XMLHttpRequest,ActiveXObject對象等為瀏覽器特有的

3)JavaScript與Java的關系

JavaScript與Java沒有直接的關系,間接的關系是1)JavaScript原名LiveScript吸收了Java的一些特性升級為了JavaScript2)JavaScript曾Java的熱度(據說)

現今JavaScript是一門前端非常獨立重要成熟的動態腳本語言,主要用于對HTML(Dom對象)的操作

4)JavaScript的編輯工具

個人推薦Visual Studio 2010及以上版本或者Visual Studio Code(其他的編輯器看個人愛好自選),它們都有強大的智能提示或者插件,非常好用也便于JavaScript的學習

5)現階段學習目標

掌握JavaScript基礎語法和JavaScript對Dom的操作(使用JavaScript操作html頁面)

HTML DOM 節點

在 HTML DOM (Document Object Model) 中 , 每一個元素都是節點:

文檔是一個文檔。
所有的HTML元素都是元素節點。
所有 HTML 屬性都是屬性節點。
文本插入到 HTML 元素是文本節點。are text nodes。
注釋是注釋節點。

Document 對象

當瀏覽器載入 HTML 文檔, 它就會成為 document 對象。

document 對象是HTML文檔的根節點與所有其他節點（元素節點，文本節點，屬性節點, 注釋節點）。

Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。

提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。

瀏覽器支持

所有主要瀏覽器都支持 Document 對象。

Document 對象屬性和方法

HTML文檔中可以使用以上屬性和方法:

屬性 / 方法	描述
document.activeElement	返回當前獲取焦點元素
document.addEventListener()	向文檔添加句柄
document.adoptNode(node)	從另外一個文檔返回 adapded 節點到當前文檔。
document.anchors	返回對文檔中所有 Anchor 對象的引用。
document.applets	返回對文檔中所有 Applet 對象的引用。
document.baseURI	返回文檔的絕對基礎 URI
document.body	返回文檔的body元素
document.close()	關閉用 document.open() 方法打開的輸出流，并顯示選定的數據。
document.cookie	設置或返回與當前文檔有關的所有 cookie。
document.createAttribute()	創建一個屬性節點
document.createComment()	createComment() 方法可創建注釋節點。
document.createDocumentFragment()	創建空的 DocumentFragment 對象，并返回此對象。
document.createElement()	創建元素節點。
document.createTextNode()	創建文本節點。
document.doctype	返回與文檔相關的文檔類型聲明 (DTD)。
document.documentElement	返回文檔的根節點
document.documentMode	返回用于通過瀏覽器渲染文檔的模式
document.documentURI	設置或返回文檔的位置
document.domain	返回當前文檔的域名。
document.domConfig	返回normalizeDocument()被調用時所使用的配置
document.embeds	返回文檔中所有嵌入的內容（embed）集合
document.forms	返回對文檔中所有 Form 對象引用。
document. getElementsByClassName()	返回文檔中所有指定類名的元素集合，作為 NodeList 對象。
document.getElementById()	返回對擁有指定 id 的第一個對象的引用。
document.getElementsByName()	返回帶有指定名稱的對象集合。
document.getElementsByTagName()	返回帶有指定標簽名的對象集合。
document.images	返回對文檔中所有 Image 對象引用。
document.implementation	返回處理該文檔的 DOMImplementation 對象。
document.importNode()	把一個節點從另一個文檔復制到該文檔以便應用。
document.inputEncoding	返回用于文檔的編碼方式（在解析時）。
document.lastModified	返回文檔被最后修改的日期和時間。
document.links	返回對文檔中所有 Area 和 Link 對象引用。
document.normalize()	刪除空文本節點，并連接相鄰節點
document.normalizeDocument()	刪除空文本節點，并連接相鄰節點的
document.open()	打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。
document.querySelector()	返回文檔中匹配指定的CSS選擇器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文檔中匹配的CSS選擇器的所有元素節點列表
document.readyState	返回文檔狀態 (載入中……)
document.referrer	返回載入當前文檔的文檔的 URL。
document.removeEventListener()	移除文檔中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()	重命名元素或者屬性節點。
document.scripts	返回頁面中所有腳本的集合。
document.strictErrorChecking	設置或返回是否強制進行錯誤檢查。
document.title	返回當前文檔的標題。
document.URL	返回文檔完整的URL
document.write()	向文檔寫 HTML 表達式或 JavaScript 代碼。
document.writeln()	等同于 write() 方法，不同的是在每個表達式之后寫一個換行符。

警告 !!!

在 W3C DOM核心，文檔對象繼承節點對象的所有屬性和方法。

很多屬性和方法在文檔中是沒有意義的。

HTML 文檔對象可以避免使用這些節點對象和屬性：

屬性 / 方法	避免的原因
document.attributes	文檔沒有該屬性
document.hasAttributes()	文檔沒有該屬性
document.nextSibling	文檔沒有下一節點
document.nodeName	這個通常是 #document
document.nodeType	這個通常是 9(DOCUMENT_NODE)
document.nodeValue	文檔沒有一個節點值
document.ownerDocument	文檔沒有主文檔
document.ownerElement	文檔沒有自己的節點
document.parentNode	文檔沒有父節點
document.previousSibling	文檔沒有兄弟節點
document.textContent	文檔沒有文本節點

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：iconfont字體生成原理及使用技巧
下一篇：用Vue制作穿梭框

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

這些移動端WEB開發的常見問題你知道幾個-WEB前端

您的項目需求