移動平臺前端開發之WebApp代碼技巧

時間 2019-11-26

標籤移動平臺前端開發 webapp 代碼技巧欄目無線简体版

原文原文鏈接

一、首先咱們來看看webkit內核中的一些私有的meta標籤，這些meta標籤在開發webapp時起到很是重要的做用html

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />

第一個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；
第二個meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；
第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；
第四個meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼web

二、關於Apple設備私有的apple-touch-icon和apple-touch-icon-precomposed的區別詳解：瀏覽器

之前咱們用過favicon在瀏覽器給網站進行身份表示，用法以下：app

<link href="http://image.feeliu.com/web/favicon.ico" rel="shortcut icon" />
<link href="http://image.feeliu.com/web/favicon.ico" rel="Bookmark" />

現今移動設備愈來愈多，蘋果爲iOS設備配備了apple-touch-icon私有屬性，添加該屬性，在iPhone,iPad,iTouch的safari瀏覽器上能夠使用添加到主屏按鈕將網站添加到主屏幕上，方便用戶之後訪問。實現方法是在HTML文檔的<head>標籤加入下面代碼便可。webapp

<link rel="apple-touch-icon" href="/custom_icon.png"/>

apple-touch-icon 標籤支持sizes屬性，能夠用來放置對應不一樣的設備。iphone

57×57（默認值）的圖標對應320×640的iphone老設備，72×72對應ipad，114×114對應retina屏的iPhone及iTouch。ipad3對應144×144的高分辨率。網站

在iPhone/iPad等蘋果移動設備上，能夠把網站」添加至主屏幕」，添加時的圖標能夠在HTML中自定義設置圖片。spa

能夠使用apple-touch-icon和apple-touch-icon-precomposed這兩種方法，二者區別是：scala

使用apple-touch-icon屬性爲「增長一層透明高光層的圖標」設計

<link rel=」apple-touch-icon」 href=」icon.png」 />
使用apple-touch-icon-precomposed屬性爲「設計原圖圖標」

<link rel=」apple-touch-icon-precomposed」 href=」icon.png」 />

文章摘自http://blog.sina.com.cn/s/blog_655388ed01016vpi.html

相關文章

相關標籤/搜索

移動平臺開發

前端開發技巧

前端小技巧

移動端web開發

開發小技巧

Android開發技巧

Docker命令大全

代碼格式化

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<