日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

前言

堅守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價值觀，專業(yè)網(wǎng)站建設服務10余年為成都成都主動防護網(wǎng)小微創(chuàng)業(yè)公司專業(yè)提供成都企業(yè)網(wǎng)站建設營銷網(wǎng)站建設商城網(wǎng)站建設手機網(wǎng)站建設小程序網(wǎng)站建設網(wǎng)站改版，從內容策劃、視覺設計、底層架構、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設服務。

iOS上的一個Web App（下圖中的「念」）和Native App(原生應用)在外觀上看起來基本上一樣，但是其使用的技術是HTML，CSS，Javascript，而不是原生應用所使用的Objective-C。

本文簡單介紹一下如何把一個Web站點改造成iOS上的Web App，這里假設你的網(wǎng)站是響應式設計（responsive design）或者已經(jīng)做過移動端的適配。

viewport

我們在HTML中加上viewport(這里假設用戶已經(jīng)對viewport有所了解)　meta標簽：

其中width=device-width指的是移動瀏覽器所顯示的寬度等于設備的物理寬度，initial-scale=1.0指的是初始縮放倍數(shù)為1.0(即不縮放)，maximum-scale=1.0指的是***的縮放倍數(shù)是1.0，user-scalable=no指用戶不可以手動進行縮放。這些參數(shù)請根據(jù)自己的情況進行調整。本站調整完成后，效果如下：

Icon

當用戶通過safari訪問我們網(wǎng)站的時候，用戶是可以把網(wǎng)站的URL以一個快捷方式的形式添加到主屏幕的，展示形式跟原生的應用是一樣，所以我們要給我們的網(wǎng)站添加應用Icon。

iOS所用的icon是png格式的，其提供了apple-touch-icon和apple-touch-icon-precomposed兩種icon，使用方式如下：

以上你只能選其一，二者的區(qū)別在于如果使用apple-touch-icon，那么iOS會給icon加上一些NB的效果，包括圓角，陰影，反光。如果使用apple-touch-icon-precomposed則iOS不會加這個效果。

如果你的網(wǎng)站也要可以在Ipad上訪問，那么你還要針對不同的設備準備不同尺寸的icon，你可以通過sizes屬性來指定icon的尺寸：

如果你不指定size屬性，那么默認為57x57，我們可以看到ipad所需icon的尺寸是72x72，retina屏幕的iphone所需的尺寸是114x114，retina屏幕的ipad所需的尺寸是144x144。

如果沒有當前設備所需尺寸的icon，那么iOS將會選用icon中所有大于此設備所需尺寸的最小的一個。如果沒有比設備所需尺寸大的icon，那么選用***的那個icon。如果有多個符合條件的icon，那么iOS會選擇有precomposed關鍵詞的那個。

如果在HTML中沒有指定icon，那么iOS會到WEB根目錄下尋找對應的icon。假設設備需要57x57的icon，那么iOS將以下面的順序進行訪問：

• apple-touch-icon-57x57-precomposed.png
• apple-touch-icon-57x57.png
• apple-touch-icon-precomposed.png
• apple-touch-icon.png

#p#

啟動界面

像原生應用一樣，你也可以給Web App加上一個啟動界面，很簡單：

在iPhone和iPod touch上，尺寸大小必須為320 x 460。

隱藏Safari用戶欄

為了更加像原生應用，我們還可以對Safari的用戶欄和地址欄進行隱藏，這個叫作standalone模式，加入以下meta進入此模式：

你可以通過window.navigator.standalone來檢測當前是否是standalone模式。效果如下：

鏈接問題

在Safari中，如果點擊一個鏈接，那么Safari將會打開一個新的tab，顯然做為一個應用這體驗簡直太差了，需要在HTML中加入以下JavaScript來阻止此行為：

以上代碼來自gist。

***

Have fun　：）

參考：

Configuring Web Applications

Everything you always wanted to know about touch icons

原文鏈接：http://weizhifeng.net/make-web-app-more-native.html

新聞標題：把你的網(wǎng)站改造成一個iOSWebApp
網(wǎng)頁路徑：http://m.5511xx.com/article/dpeccod.html