真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

移動(dòng)端html5meta標(biāo)簽有哪些作用

移動(dòng)端html5meta標(biāo)簽有哪些作用,相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)建站!專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了南明免費(fèi)建站歡迎大家使用!

制作手機(jī)版網(wǎng)站的時(shí)候,除了頁(yè)面簡(jiǎn)潔、操作方便等訪問(wèn)者可以看到的地方以外,就是 Meta 標(biāo)簽的設(shè)置,合理設(shè)置 Meta 標(biāo)簽 對(duì)手機(jī)版網(wǎng)站的搜索引擎優(yōu)化,手機(jī)瀏覽器的渲染展示都有非常大的幫助。對(duì)于桌面平臺(tái)web布局中大家對(duì)meta標(biāo)簽再熟悉不過(guò)了,它永遠(yuǎn)位于 head 元素內(nèi)部,對(duì)做SEO的朋友一定對(duì)meta有種特殊的感情吧,今天我們就來(lái)說(shuō)說(shuō)移動(dòng)平臺(tái)的meta標(biāo)簽,在移動(dòng)平臺(tái)meta標(biāo)簽究竟有哪些神奇的功效呢?
1、Meta 之 viewport
說(shuō)到移動(dòng)平臺(tái)meta標(biāo)簽,那就不得不說(shuō)一下viewport了,那么什么是viewport呢?
viewport即可視區(qū)域,對(duì)于桌面瀏覽器而言,viewport指的就是除去所有工具欄、狀態(tài)欄、滾動(dòng)條等等之后用于看網(wǎng)頁(yè)的區(qū)域
。對(duì)于傳統(tǒng)WEB頁(yè)面來(lái)說(shuō),980的寬度在iphone上顯示是很正常的,也是滿屏的,但對(duì)于webapp而言,可能就有點(diǎn)問(wèn)題了,在iphone上我們的webapp在豎屏下通常寬度都是320,這時(shí)我們320頁(yè)面在iphone上顯示成啥效果呢?有人可能認(rèn)為iPhone不是320的寬度莫,感覺(jué)應(yīng)該是滿屏的吧,事實(shí)呢?我們來(lái)看一下如下布局在iPhone上的顯示情況

代碼如下:

    Meta Viewport  div,body{ padding:0; margin:0; } body{ padding-top:100px; color:#fff; } div{ width:320px; height:100px; margin:0 auto; background:#000; text-align:center; font:30px/100px Arial; }    
 AppUE 
  

因此我們必須改變viewport,我們就有如下幾種屬性值可以設(shè)置:
width: viewport 的寬度 (范圍從 200 到 10,000 ,默認(rèn)為 980 像素 )
height: viewport 的高度 (范圍從 223 到 10,000 )
initial-scale: 初始的縮放比例 (范圍從>0到 10 )
minimum-scale: 允許用戶縮放到的最小比例
maximum-scale: 允許用戶縮放到的最大比例
user-scalable: 用戶是否可以手動(dòng)縮放
對(duì)于這些屬性,我們可以設(shè)置其中的一個(gè)或者多個(gè),并不需要你同時(shí)都設(shè)置,iPhone 會(huì)根據(jù)你設(shè)置的屬性自動(dòng)推算其他屬性值 ,而非直接采用默認(rèn)值。
如果你把initial-scale=1 ,那么 width 和 height在豎屏?xí)r自動(dòng)為320*356 (不是320*480 因?yàn)榈刂窓诘榷颊紦?jù)空間 ),橫屏?xí)r自動(dòng)為 480*208。類似地 ,如果你僅僅設(shè)置了 width ,就會(huì)自動(dòng)推算出initial-scale 以及height。例如你設(shè)置了 width=320 ,豎屏?xí)r initial-scale 就是 1 ,橫屏?xí)r則變成 1.5 了。 那么到底這些設(shè)置如何讓 Safari 知道 ?其實(shí)很簡(jiǎn)單 ,就一個(gè) meta ,形如 :

代碼如下:

好了,我們就可以按全屏來(lái)布局我們的頁(yè)面了,不用再擔(dān)心頁(yè)面顯示的很小了!
2、Meta 之 format-detection

代碼如下:

你明明寫的一串?dāng)?shù)字沒(méi)加鏈接樣式,而iPhone會(huì)自動(dòng)把你這個(gè)文字加鏈接樣式、并且點(diǎn)擊這個(gè)數(shù)字還會(huì)自動(dòng)撥號(hào)!想去掉這個(gè)撥號(hào)鏈接該如何操作呢?這時(shí)我們的meta又該大顯神通了,代碼如下:
telephone=no就禁止了把數(shù)字轉(zhuǎn)化為撥號(hào)鏈接!
telephone=yes就開(kāi)啟了把數(shù)字轉(zhuǎn)化為撥號(hào)鏈接,要開(kāi)啟轉(zhuǎn)化功能,這個(gè)meta就不用寫了,在默認(rèn)是情況下就是開(kāi)啟!
3、Meta 之 apple-mobile-web-app-capable

這meta的作用就是刪除默認(rèn)的蘋果工具欄和菜單欄。content有兩個(gè)值”yes”和”no”,當(dāng)我們需要顯示工具欄和菜單欄時(shí),這個(gè)行meta就不用加了,默認(rèn)就是顯示。
4、Meta 之 apple-mobile-web-app-status-bar-style

代碼如下:



作用是控制狀態(tài)欄顯示樣式

代碼如下:

status-bar-style:black
status-bar-style:black-translucent

今天就簡(jiǎn)單說(shuō)下在手機(jī)版網(wǎng)站中需要添加哪幾種 Meta 標(biāo)簽:
viewport
viewport 幾乎已經(jīng)是公認(rèn)的標(biāo)準(zhǔn)了,最初是由蘋果公司創(chuàng)建,用于 iPhone 上面的移動(dòng)版 Safari,由于 iPhone 的大賣,大部分其他移動(dòng)瀏覽器都接受,比如 Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox
最基本的例子,在移動(dòng)上使站點(diǎn)全屏寬度:

代碼如下:


HandheldFriendly
undefined
undefined

代碼如下:

MobileOptimized
這是一個(gè) Windows 專有的 meta 標(biāo)簽也最終成為用于識(shí)別移動(dòng)內(nèi)容的另一種方法,但是該標(biāo)簽的缺點(diǎn)是,特定的寬度必須給出,再次,這個(gè)標(biāo)簽的支持情況也是未知的:

代碼如下:

看完上述內(nèi)容,你們掌握移動(dòng)端html5meta標(biāo)簽有哪些作用的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!


當(dāng)前名稱:移動(dòng)端html5meta標(biāo)簽有哪些作用
網(wǎng)址分享:http://weahome.cn/article/pggjjd.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部