html5手機頁面的設計方法

今天小編給大家分享一下html5手機頁面的設計方法的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　一、普通手機頁的設置

　　1.<meta name="viewport" content=""/>說明：屏幕的縮放

　　完整案例：

　　2.name之format-detection忽略電話號碼和郵箱

　　也可以寫成：

　　3.name之設置作者姓名及聯系方式

　　4.其他

　　二、iOS系統的meta設置：

　　1、開啟對web app程序的支持

　　<meta name="apple-mobile-web-app-capable" content="yes">

　　說明：

　　2、 改變頂部狀態條的顏色；

　　<meta name="apple-mobile-web-app-status-bar-style" content="black" />

　　說明：

　　3、設置“添加到主屏幕圖標

　　Safari 瀏覽器有一個“添加到主屏幕”的功能，用戶可以像保存書簽一樣把一個網站添加到主屏幕，下次用戶直接點擊主屏幕上的圖標就能進入網站。

　　這個功能不僅方便用戶快速訪問我們的網站，而且也使我們的 WebApp 更像一個原生應用

　　因為 iOS 分辨率，所以 icon.png 圖片的尺寸也各不相同，我們可以通過sizes屬性來分別定義，iOS 系統會自動獲取向匹配的圖片：

　　擴展：

　　為用戶加上提示

　　通過添加一個JavaScript代碼來邀請用戶添加到主屏幕，該庫使用了HTML5的本地存儲跟蹤是否已經顯示過了，以避免重復出現。

　　目前使用比較多和有在更新的一個庫來自這里：

　　4、設置桌面圖標的標題

　　為了在主屏達到最好的顯示效果，title最好限制在六個中文長度內，超長的內容會被隱藏：

　　5、設置啟動畫面

　　當用戶點擊主屏圖標打開 WebApp 時，系統會展示啟動畫面，在未設置情況下系統會默認顯示該網站的首頁截圖，當然這個體驗不是很好，所以我們需要通過以下代碼來自定義啟動畫面：

　　根據 iOS 設備的分辨率，其啟動畫面的圖片尺寸也各不相同所以：

　　或者以下代碼，具體沒有實踐，還需考證

　　6、 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）

　　比較常用的meta

　　或者說

　　meta屬性在HTML中占據了很重要的位置。如：針對搜索引擎的SEO，文檔的字符編碼，設置刷新緩存等。雖然一些網頁可能沒有使用meta，但是作為正規軍，我們還是有必要了解一些meta的屬性，并且能夠熟練使用它們。

以上就是“html5手機頁面的設計方法”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。