建站
咨詢
售后
建站咨詢
新聞中心
今天小編給大家分享一下html5手機(jī)頁(yè)面的設(shè)計(jì)方法的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
創(chuàng)新互聯(lián)是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷、企業(yè)網(wǎng)站建設(shè)，賣友情鏈接，一元廣告為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。
一、普通手機(jī)頁(yè)的設(shè)置
1.說明：屏幕的縮放
完整案例：
2.name之format-detection忽略電話號(hào)碼和郵箱
也可以寫成：
3.name之設(shè)置作者姓名及聯(lián)系方式
4.其他
二、iOS系統(tǒng)的meta設(shè)置：
1、開啟對(duì)web app程序的支持
說明：
2、 改變頂部狀態(tài)條的顏色；
說明：
3、設(shè)置“添加到主屏幕圖標(biāo)
Safari 瀏覽器有一個(gè)“添加到主屏幕”的功能，用戶可以像保存書簽一樣把一個(gè)網(wǎng)站添加到主屏幕，下次用戶直接點(diǎn)擊主屏幕上的圖標(biāo)就能進(jìn)入網(wǎng)站。
這個(gè)功能不僅方便用戶快速訪問我們的網(wǎng)站，而且也使我們的 WebApp 更像一個(gè)原生應(yīng)用
因?yàn)?iOS 分辨率，所以 icon.png 圖片的尺寸也各不相同，我們可以通過sizes屬性來分別定義，iOS 系統(tǒng)會(huì)自動(dòng)獲取向匹配的圖片：
擴(kuò)展：
為用戶加上提示
通過添加一個(gè)JavaScript代碼來邀請(qǐng)用戶添加到主屏幕，該庫(kù)使用了HTML5的本地存儲(chǔ)跟蹤是否已經(jīng)顯示過了，以避免重復(fù)出現(xiàn)。
目前使用比較多和有在更新的一個(gè)庫(kù)來自這里：
4、設(shè)置桌面圖標(biāo)的標(biāo)題
為了在主屏達(dá)到最好的顯示效果，title最好限制在六個(gè)中文長(zhǎng)度內(nèi)，超長(zhǎng)的內(nèi)容會(huì)被隱藏：
5、設(shè)置啟動(dòng)畫面
當(dāng)用戶點(diǎn)擊主屏圖標(biāo)打開 WebApp 時(shí)，系統(tǒng)會(huì)展示啟動(dòng)畫面，在未設(shè)置情況下系統(tǒng)會(huì)默認(rèn)顯示該網(wǎng)站的首頁(yè)截圖，當(dāng)然這個(gè)體驗(yàn)不是很好，所以我們需要通過以下代碼來自定義啟動(dòng)畫面：
根據(jù) iOS 設(shè)備的分辨率，其啟動(dòng)畫面的圖片尺寸也各不相同所以：
或者以下代碼，具體沒有實(shí)踐，還需考證
6、 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）
比較常用的meta
或者說
meta屬性在HTML中占據(jù)了很重要的位置。如：針對(duì)搜索引擎的SEO，文檔的字符編碼，設(shè)置刷新緩存等。雖然一些網(wǎng)頁(yè)可能沒有使用meta，但是作為正規(guī)軍，我們還是有必要了解一些meta的屬性，并且能夠熟練使用它們。
以上就是“html5手機(jī)頁(yè)面的設(shè)計(jì)方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文題目：html5手機(jī)頁(yè)面的設(shè)計(jì)方法
分享URL：http://fisionsoft.com.cn/article/gsoieo.html
