欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

移動(dòng)端專用的meta標(biāo)簽設(shè)置大全

  發(fā)布時(shí)間：2018-09-04 17:19:00   作者：佚名   我要評(píng)論
不知道有沒有人覺得，html的meta標(biāo)簽描述的頭部信息特別多，下面這篇文章主要給大家分享介紹了關(guān)于移動(dòng)端專用的meta設(shè)置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

之前學(xué)習(xí)前端中，對(duì)meta標(biāo)簽的了解僅僅只是這一句。

<meta charset="UTF-8">

但是打開任意的網(wǎng)站，其head標(biāo)簽內(nèi)都有一列的meta標(biāo)簽。比如我們腳本之家網(wǎng)站，但是自己卻很不熟悉，于是把meta標(biāo)簽加入了學(xué)習(xí)計(jì)劃的最前方。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”>

這個(gè)用的最多，width和height指令分別指定視區(qū)的邏輯寬度和高度。他們的值要么是以像素為單位的數(shù)字，要么是一個(gè)特殊的標(biāo)記符號(hào)。width指令使用device-width標(biāo)記可以指示視區(qū)寬度應(yīng)為設(shè)備的屏幕寬度。類似地height指令使用device-height標(biāo)記指示視區(qū)高度為設(shè)備的屏幕高度。
user-scalable指令指定用戶是否可以縮放視區(qū)，即縮放Web頁(yè)面的視圖。值為yes時(shí)允許用戶進(jìn)行縮放，值為no時(shí)不允許縮放

initial-scale指令用于設(shè)置Web頁(yè)面的初始縮放比例。默認(rèn)的初始縮放比例值因智能手機(jī)瀏覽器的不同而有所差異。通常情況下設(shè)備會(huì)在瀏覽器中呈現(xiàn)出整個(gè)Web頁(yè)面，設(shè)為1.0則將顯示未經(jīng)縮放的Web文檔。

maximum-scale和minimum-scale指令用于設(shè)置用戶對(duì)Web頁(yè)面縮放比例的限制。值的范圍為0.25至10.0之間。與initial-scale相同，這些指令的值是應(yīng)用于視區(qū)內(nèi)容的縮放比例。

所有智能手機(jī)瀏覽器都支持ViewPort <meta>標(biāo)記的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令，而是主張用戶應(yīng)始終保留在移動(dòng)瀏覽器中縮放Web頁(yè)面的能力。

下面還真用得少

devicePixelRatio

window.devicePixelRatio是設(shè)備上物理像素和設(shè)備獨(dú)立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips

fit-to-screen網(wǎng)站自適應(yīng)屏幕

如果content的值小于或等于screen width 網(wǎng)站自適應(yīng)屏幕fit-to-screen將被關(guān)閉網(wǎng)站不會(huì)隨著瀏覽器拉伸縮放

如果content的值大于screen width;fit-to-screen將開啟

蘋果瀏覽器相關(guān)

2015-07-08

<meta name=”viewport” content=”minimal-ui”>

在iOS 7.1的Safari中為meta標(biāo)簽新增minimal-ui屬性，讓網(wǎng)頁(yè)在加載時(shí)便可隱藏頂部的地址欄與底部的導(dǎo)航欄。

<meta name=”apple-mobile-web-app-capable” content=”yes”>

是否啟動(dòng)webapp功能 設(shè)置為yes 網(wǎng)站就會(huì)在滿屏模式full-screen mode刪除默認(rèn)的蘋果工具欄和菜單欄

<meta name=”apple-touch-fullscreen” content=”yes”>

開啟對(duì)web app程序的支持

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

iPhone會(huì)自動(dòng)把你這個(gè)文字加鏈接樣式、并且點(diǎn)擊這個(gè)數(shù)字還會(huì)自動(dòng)撥號(hào)！

telephone=no就忽略頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼

telephone=yes就開啟了把數(shù)字轉(zhuǎn)化為撥號(hào)鏈接,在默認(rèn)是情況下就是開啟！

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=””apple-mobile-web-app-status-bar-style” content=”black-translucent” />

控制狀態(tài)欄顯示樣式  default（白色）black（黑色） black-translucent（灰色半透明）

link標(biāo)簽apple-touch-icon

如果 apple-mobile-web-app-capable 設(shè)置為 yes 了，那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按鈕將網(wǎng)站添加到主屏幕上。

而通過設(shè)置相應(yīng) apple-touch-icon 標(biāo)簽，則添加到主屏上的圖標(biāo)就會(huì)使用我們指定的圖片。

以下是針對(duì)ox不同設(shè)備，選擇一個(gè)最優(yōu)icon。默認(rèn)iphone的大小為60px，ipad為76px，retina屏乘以2倍。

<link rel=”apple-touch-icon” href=”touch-icon-iphone.png”>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”touch-icon-ipad.png”>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”touch-icon-iphone-retina.png”>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”touch-icon-ipad-retina.png”>

ios7以前系統(tǒng)默認(rèn)會(huì)對(duì)圖標(biāo)添加特效（圓角及高光），如果不希望系統(tǒng)添加特效，則可以用 apple-touch-icon-precomposed.png 代替 apple-touch-icon.png

圖標(biāo)使用的優(yōu)先級(jí)如下：

如果沒有跟相應(yīng)設(shè)備推薦尺寸一致的圖標(biāo)，那個(gè)會(huì)優(yōu)先使用比推薦尺寸大，但最接近推薦尺寸的圖標(biāo)。

如果沒有比推薦尺寸大的圖標(biāo)，會(huì)優(yōu)先選擇最接近推薦尺寸的圖標(biāo)。

如些有多個(gè)圖標(biāo)符合推薦尺寸，會(huì)優(yōu)先選擇包含關(guān)鍵字precomposed的圖標(biāo)。

如果未在區(qū)域指定用link標(biāo)簽指定圖標(biāo)，會(huì)自動(dòng)搜索網(wǎng)站根目錄下以 apple-touch-icon 為前綴的png圖標(biāo)。

注：ios7不再為icon添加特效，ios7以前則默認(rèn)為icon添加特效，除非icon有關(guān)鍵字 -precomposed.png 為后綴。

IE瀏覽器

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  避免IE使用兼容模式

<meta name=”MobileOptimized” content=”320″>  微軟為IE Mobile版設(shè)置的定義寬度標(biāo)記

瀏覽器不會(huì)自動(dòng)調(diào)整文件的大小,也就是說是固定大小,不會(huì)隨著瀏覽器拉伸縮放。

<meta name=”HandheldFriendly” content=”true” /> ：是否對(duì)手持設(shè)備友好，只有true或者false

UC瀏覽器

<meta name=”screen-orientation” content=”portrait”>  強(qiáng)制豎屏

<meta name=”full-screen” content=”yes”>  強(qiáng)制全屏

<meta name=”browsermode” content=”application”>  應(yīng)用模式

QQ瀏覽器

<meta name=”x5-orientation” content=”portrait”>  強(qiáng)制豎屏

<meta name=”x5-fullscreen” content=”true”>  強(qiáng)制全屏

<meta name=”x5-page-mode” content=”app”>  應(yīng)用模式

360瀏覽器

<meta name=”renderer” content=”webkit”>  開啟急速模式

meta指元素可提供有關(guān)頁(yè)面的元信息（meta-information），比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。 標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對(duì)。

手機(jī)端特有的有哪些？

<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">

第一個(gè)meta標(biāo)簽表示：強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點(diǎn)擊屏幕放大瀏覽；

  • width - viewport的寬度 height - viewport的高度  
  • initial-scale - 初始的縮放比例 
  • minimum-scale - 允許用戶縮放到的最小比例  
  • maximum-scale - 允許用戶縮放到的最大比例 
  • user-scalable - 用戶是否可以手動(dòng)縮放

第二個(gè)meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽，它表示：允許全屏模式瀏覽；

第三個(gè)meta標(biāo)簽也是iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；

在web app應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色；

默認(rèn)值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。

注意：若值為“black-translucent”將會(huì)占據(jù)頁(yè)面px位置，浮在頁(yè)面上方（會(huì)覆蓋頁(yè)面20px高度–iphone4和itouch4的Retina屏幕為40px）。

第四個(gè)meta標(biāo)簽表示：告訴設(shè)備忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼。

下面看一下各大廠移動(dòng)端頁(yè)面 meta

一、天貓

<meta name="aplus-terminal" content="1"/>
<meta name="apple-mobile-web-app-title" content="TMALL"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta name="format-detection" content="telephone=no, address=no">

二、淘寶

<meta charset="utf-8">

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

<meta content="yes" name="apple-touch-fullscreen"/> 

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

<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

三、京東

<title> 京東 - 手機(jī)版 </title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">

<meta http-equiv="Content-Type" content="text/html; charset=GBK">

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

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

<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" content="-1">

<meta http-equiv="Cache-Control" content="no-cache">

<meta http-equiv="Pragma" content="no-cache">

<meta name="Keywords" content="">

<meta name="description" content="">

四、網(wǎng)易

<title>手機(jī)網(wǎng)易網(wǎng)</title>

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

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

<meta name="keywords" content="" />

<meta name="description" content="" />

五、百度

<meta name="referrer" content="always">

<meta charset="utf-8">

<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">

六、搜狐

<title>手機(jī)搜狐網(wǎng)</title>
                            
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Cache-Control" content="no-cache" />

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

<meta name="MobileOptimized" content="320"/>

<meta name="description" content="" />

<meta name="keywords" content="" />

————————

模擬手機(jī)端網(wǎng)頁(yè)

<meta name=”viewport” content=”width=device-width,user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>

viewport ->視窗(展示區(qū)域)

width=device-width設(shè)備寬度

視口

<metaname = ‘viewport’content = “width=320”>

<metaname = ‘viewport’content = “width=device-width”>

user-scalable=no/0是否允許縮放

 initial-scale=1.0初始值

maximum-scale=1.0

minimum-scale=1.0

—————————————————————————–

<meta name=”viewport” content=”width=device-width, user-scalable=no”>

user-scalable=no/0禁止用戶縮放頁(yè)面

<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0″>

initial-scale=1.0初始化頁(yè)面縮放比例

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>

maximum-scale=1.0最大縮放比例(為了個(gè)別手機(jī)華為Meta8)

—————————————————————————–

蘋果設(shè)備專有meta:

<!—允許網(wǎng)頁(yè)以app形式運(yùn)行(允許添加到主屏幕)—>

<meta name=”apple-mobile-web-app-capable” content=”yes”>

<!—狀態(tài)欄顏色—>

<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>

京東meta:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>

<meta name=”apple-mobile-web-app-capable” content=”yes”>

<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>

<!—禁止之別電話號(hào)碼和郵箱—>

<meta name=”format-detection” content=”telephone=no,email=no”>

淘寶meta：

<meta content=”yes” name=”apple-mobile-web-app-capable”>

<!–點(diǎn)擊頁(yè)面區(qū)域全屏展示—>

<meta content=”yes” name=”apple-touch-fullscreen”/>

<meta content=”telephone=no,email=no” name=”format-detection”/>

<!–應(yīng)用信息，保留系統(tǒng)歷史記錄，運(yùn)動(dòng)效果–>

<meta name=”App-Config” content=”fullscreen=yes,useHistoryState=yes,transition=yes”/>

其他meta:

<!–強(qiáng)制讓360瀏覽器用chrome內(nèi)核渲染頁(yè)面–>

<meta name=”renderer” content=”webkit”>

<!–盡量用IE最新的模式渲染–>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<!–針對(duì)手持設(shè)備優(yōu)化，主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器，比如黑莓–>

<meta name=”HandheldFriendly” content=”true”>

<!–微軟的老式瀏覽器–>

<meta name=”MobileOptimized” content=”320″>

<!– uc強(qiáng)制豎屏–>

<meta name=”screen-orientation” content=”portrait”>

<!– QQ強(qiáng)制豎屏–>

<meta name=”x5-orientation” content=”portrait”>

<!– UC強(qiáng)制全屏–>

<meta name=”full-screen” content=”yes”>

<!– QQ強(qiáng)制全屏–>

<meta name=”x5-fullscreen” content=”true”>

<!– UC應(yīng)用模式–>

<meta name=”browsermode” content=”application”>

<!– QQ應(yīng)用模式–>

<meta name=”x5-page-mode” content=”app”>

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

  • HTML常用meta大全(推薦)

    這篇文章主要介紹了HTML常用meta大全(推薦)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-30

  • HTML中的<meta>標(biāo)簽的使用詳解

    這篇文章主要介紹了HTML中的<meta>標(biāo)簽的使用，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2018-06-05

  • html中meta標(biāo)簽及用法詳解

    <meta> 元素可提供有關(guān)頁(yè)面的元信息（meta-information），比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。這篇文章給大家介紹了html中meta標(biāo)簽及用法詳解，感興趣的朋
    2018-02-23

  • HTML標(biāo)簽meta總結(jié),HTML5 head meta 屬性整理

    移動(dòng)前端開發(fā)中添加一些webkit專屬的HTML5頭部標(biāo)簽，幫助瀏覽器更好解析HTML代碼，更好地將移動(dòng)web前端頁(yè)面表現(xiàn)出來。本文整理一些常用的meta標(biāo)簽,需要的朋友可以參考下
    2017-06-29

  • dreamweaver cs5不寫寫代碼怎么添加meta標(biāo)簽?

    dreamweaver cs5不寫寫代碼怎么添加meta標(biāo)簽？dreamweaver想要添加meta標(biāo)簽，但是不想寫代碼，該怎么辦呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下
    2017-04-11

  • HTML5各種頭部meta標(biāo)簽的功能(推薦)

    本文給大家介紹了html5中各種頭部meta標(biāo)簽功能小結(jié)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下
    2017-03-13

  • HTML中meta標(biāo)簽及Keywords

    這篇文章主要介紹了HTML中meta標(biāo)簽及Keywords的相關(guān)資料,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-04-15

最新評(píng)論