手機web網頁制作的認識(有關meta標簽)

?近日以來一直在看JQuery Mobile?一個手機開發框架,說實話真的很頭疼的~~~~ 因為里面有很多的屬性、方法和事件~~~

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

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

??? 網頁手機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?-?用戶是否可以手動縮放?

二、<meta name="format-detection" content="telephone=no">

當該 HTML 頁面在手機上瀏覽時,該標簽用于指定是否將網頁內容中的手機號碼顯示為撥號的超鏈接。

在 iPhone 上默認值是:

<meta name="format-detection" content="telephone=yes"/>

如果你不希望手機自動將網頁中的電話號碼顯示為撥號的超鏈接,那么可以這樣寫:

<meta name="format-detection" content="telephone=no"/>

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

說明:網站開啟對web app程序的支持。

四、<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屏幕可以支持雙倍,但是不支持,圖片顯示不出來。

五、<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="">

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


?


<meta?name="apple-mobile-web-app-capable"?content="yes">??
<meta?name="apple-mobile-web-app-status-bar-style"?content="black"?/>??
<meta?http-equiv="content-type"?content="text/html;?charset=gb2312">??
<meta?name="HandheldFriendly"?content="True">??
<meta?name="viewport"?content="width=device-width,?minimum-scale=1,?maximum-scale=1,?user-scalable=no">??
<meta?name="apple-touch-fullscreen"?content="YES"?/>??
<meta?name="viewport"?content="width=device-width,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"/>??
<meta?name="format-detection"?content="telephone=no"/>

轉載于:https://www.cnblogs.com/qiandanwu/p/5783835.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/395292.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/395292.shtml
英文地址,請注明出處:http://en.pswp.cn/news/395292.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

包打包和解析過程 unity_Unity學習—資源管理概覽

本文介紹了 Unity 常用四種默認路徑&#xff0c;以及 AssetDataBase、Resources、AssetBundle 和目前最新的 Addressable 四種資源管理方式文中所有 API 均以版本 2019.3 為準本文原地址&#xff1a;Unity學習—資源管理概覽資源路徑Application.dataPath官方文檔只讀&#xff…

graphql tools_聲明式GraphQL:編寫更少的代碼,并使用graphql-tools完成更多工作

graphql toolsI’ve been working with GraphQL for a few months now, but only recently began using Apollo’s graphql-tools library. After learning a few idioms, I am able to mock up a functional API quickly. This is largely due to its low-code, declarative a…

用idea搭建SSM項目,原來這么簡單

目錄 前言軟件環境創建項目數據庫文件配置文件pom.xmllog4j.propertiesjdbc.propertiesapplicationContext.xmlspring-mvc.xmlweb.xml運行項目編寫代碼前言 前陣子突發奇想&#xff0c;想學習下SpringMVC的源碼&#xff0c;于是打算用idea搭建一個簡易的maven版SSM案例&#xf…

浙江理工大學計算機組成原理試卷,浙江理工大學計算機組成原理設計試題.doc...

計算機組成原理課程設計報告2013/2014第二學期指導教師&#xff1a;許建龍 張芳班級&#xff1a;12計科2班姓名&#xff1a;學號&#xff1a; 計算機組成原理大型實驗任務書(計算機12級1、2、3班和實驗班)實驗目的&#xff1a;深入了解計算機各種指令的執行過程&#xff0c;以及…

mac vagrant 虛擬機nfs掛載點

需求&#xff1a;在mac 上安裝了虛擬機&#xff0c;虛擬機系統為centos6.5&#xff0c;現在希望講虛擬機上點目錄通過nfs共享給mac使用 下面主要描述通過nfs共享目錄給mac調用的過程 過程參考網址&#xff1a; http://www.moqifei.com/archives/1534 &#xff08;我主要參考的這…

nodejs中require的路徑是一個文件夾時發生了什么

node中使用require的時候如果路徑是一個文件夾時&#xff0c;或者特殊的情況require(..);require(.); 這是node實戰這本書里說的情況&#xff0c;但是我在node6.9版本中發現不完全是這樣&#xff0c;可能是后來做了修改。下面說說在6.9下require路徑的過程。 這里以require(.)說…

python調用ctypes中windll中的方法超時處理_python中使用ctypes調用MinGW生成的動態鏈接庫(dll)...

關于gcc編譯dll的我就不說了&#xff0c;網上舉例一大堆&#xff0c;下面以g為例。假設有一個test.cpp文件如下&#xff1a;extern "C" {__declspec(dllexport) double add(double x,double y);}double add(double x,double y){return xy;}在MinGW中使用g編譯&#x…

慣用過程模型_慣用的Ruby:編寫漂亮的代碼

慣用過程模型Ruby is a beautiful programming language.Ruby是一種美麗的編程語言。 According to Ruby’s official web page, Ruby is a:根據Ruby的官方網頁&#xff0c;Ruby是&#xff1a; “dynamic, open source programming language with a focus on simplicity and …

采用晶體管為基本元件的計算機發展階段是,計算機應用基礎知識點

第一章 計算機基礎知識1、計算機發展階段第一代&#xff1a;電子管計算機采用電子管為基本元件&#xff0c;設計使用機器語言或匯編語言。要用于科學和工程計算 第二代&#xff1a;晶體管計算機采用晶體管為基本元件&#xff0c;程序設計采用高級語言&#xff0c;出現了操作系統…

springcloud系列三 搭建服務模塊

搭建服務模塊為了模擬正式開發環境,只是少寫了service層直接在controller里面直接引用,直接上圖和代碼:更為方便: 創建完成之后加入配置: pom.xml文件: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM…

P1801 黑匣子_NOI導刊2010提高(06)

題目描述 Black Box是一種原始的數據庫。它可以儲存一個整數數組&#xff0c;還有一個特別的變量i。最開始的時候Black Box是空的&#xff0e;而i等于0。這個Black Box要處理一串命令。 命令只有兩種&#xff1a; ADD(x):把x元素放進BlackBox; GET:i加1&#xff0c;然后輸出Bla…

MySql模糊查詢

常規like的使用限制&#xff1a; 1. like %keyword &#xff1a;索引失效&#xff0c;使用全表掃描。但可以通過翻轉函數like前模糊查詢建立翻轉函數索引走翻轉函數索引&#xff0c;不走全表掃描。 2. like keyword% &#xff1a;索引有效。 3. like %keyword% &#xff1a;索引…

python psycopg2使用_python?操作數據庫:psycopg2的使用

1 conn psycopg2.connect(database"testdb", user"postgres",password"cohondob", host"127.0.0.1", port"5432")這個API打開一個連接到PostgreSQL數據庫。如果成功打開數據庫時&#xff0c;它返回一個連接對象。2cursor c…

軟件測試人員棘手的問題,èí?t2aê?μ???ê??êìa£oè?o?±ü?a???′ìá??è±?Y...

¡¡¡¡£££©£¡££¡££££©©£¡¡¡¡¡BUG£££¢¡£££¡££¡£¡£——£…

機器學習實用指南_機器學習方法:實用指南

機器學習實用指南by Karlijn Willems通過Karlijn Willems 機器學習方法&#xff1a;實用指南 (How Machines Learn: A Practical Guide) You may have heard about machine learning from interesting applications like spam filtering, optical character recognition, and …

本地倉庫settings.xml中使用阿里的倉庫

背景 當前使用eclipse自帶的maven碰到兩個蛋疼的問題&#xff1a; maven在國內使用如果不進行FQ則會痛苦不堪如便秘。maven下載大量jar包導致某盤不夠用&#xff0c;需要換大的分區。因此為了解決這個問題就介紹兩個eclipse配置&#xff1a;maven本地路徑配置和maven外部路徑配…

day6_python之md5加密

#md5是不可逆的&#xff0c;就是沒有辦法解密的 Python內置哈希庫對字符串進行MD5加密的方法-hashlibimport hashlib def my_md5(s,salt): #用函數&#xff0c;為了提高代碼的復用率s ssalt #1.必須是字符串news str(s).encode() #2.字符串需要encode編碼后&#xff0…

異步服務_微服務全鏈路異步化實踐

1. 背景隨著公司業務的發展&#xff0c;核心服務流量越來越大&#xff0c;使用到的資源也越來越多。在微服務架構體系中&#xff0c;大部分的業務是基于Java 語言實現的&#xff0c;受限于Java 的線程實現&#xff0c;一個Java 線程映射到一個kernel 線程&#xff0c;造成了高并…

win7打開計算機死機,怎么樣解決Win7系統運行程序引起的死機問題

Win7系統不僅需要使用到電腦中自帶的一些程序&#xff0c;同時&#xff0c;也需要在win7旗艦版電腦中有選擇的自己去安裝一些程序。但是經常有用戶會碰到Win7電腦突然跳出運行程序未響應&#xff0c;出現電腦死機的情況&#xff0c;特別是開的瀏覽器窗口多的時候更是死機的頻繁…

(poj)1064 Cable master 二分+精度

題目鏈接&#xff1a;http://poj.org/problem?id1064 DescriptionInhabitants of the Wonderland have decided to hold a regional programming contest. The Judging Committee has volunteered and has promised to organize the most honest contest ever. It was decided…