手機網頁製做的認識（有關meta標籤）

時間 2019-12-10

標籤手機網頁製做認識有關 meta 標籤欄目 HTML 简体版

原文原文鏈接

近日以來一直在看JQuery Mobile 一個手機開發框架，說實話真的很頭疼的~~~~ 由於裏面有不少的屬性、方法和事件~~~html

下面是手機網頁的一些認識：android

1、<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">web

    網頁手機wap2.0網頁的head里加入下面這條元標籤，在iPhone的瀏覽器中頁面將以原始大小顯示，並不容許縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 容許用戶縮放到的最小比例
maximum-scale - 容許用戶縮放到的最大比例
user-scalable - 用戶是否能夠手動縮放瀏覽器

2、<meta name="format-detection" content="telephone=no">服務器

當該 HTML 頁面在手機上瀏覽時，該標籤用於指定是否將網頁內容中的手機號碼顯示爲撥號的超連接。app

在 iPhone 上默認值是：框架

若是你不但願手機自動將網頁中的電話號碼顯示爲撥號的超連接，那麼能夠這樣寫：工具

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

說明：網站開啓對web app程序的支持。

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

說明：

在web app應用下狀態條（屏幕頂部條）的顏色；
默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）。

注意：若值爲「black-translucent」將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕爲40px）。

！！！！蘋果web app其餘設置：

固然，配合web app的icon 和啓動界面須要額外的兩端代碼進行設定，以下所示：

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

說明：這個link就是設置web app的放置主屏幕上icon文件路徑

使用：

該路徑須要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。
圖片尺寸能夠設定爲57*57（px）或者Retina能夠定爲114*114（px），ipad尺寸爲72*72（px）

<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

說明：這個link就是設置啓動時候的界面（圖片五），放置的路勁和上面相似。

使用：

該路徑須要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。
官方規定啓動界面的尺寸必須爲 320*640（px），本來覺得Retina屏幕能夠支持雙倍，可是不支持，圖片顯示不出來。

5、<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕「後，全屏顯示 <meta name="apple-mobile-web-app-capable" content="yes" />
這meta的做用就是刪除默認的蘋果工具欄和菜單欄。content有兩個值」yes」和」no」,當咱們須要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />//將不識別郵箱
告訴設備忽略將頁面中的數字識別爲電話號碼
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。這樣就能在用戶把網頁存爲書籤時，在手機HOME界面建立應用程序樣式的圖標。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

----------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="">

----------------------------------------------------------------------------------------------------------------------------

相關標籤/搜索

網頁製做