熱門文章

      最新文章

      HTML5中新增的meta標簽含義及使用(含移動端)

      發布時間:2021-06-22 15:26:45

      1、<meta name="renderer" content="webkit">

      這是指定雙核瀏覽器,默認以何種方式渲染頁面。

      <meta name="renderer" content="webkit">//默認webkit內核

      <meta name="renderer" content="ie-comp">//默認IE兼容模式

      <meta name="renderer" content="ie-stand">//默認IE標準模式

      而 webkit|ie-comp|ie-stand 這種寫法,跟font-family的規則類似,按照順序排他的優先級,不支持則往下,瀏覽器將會按照從左到右的先后順序選擇其具備的渲染內核來處理當前網頁。目前支持對其提供支持的瀏覽器有:360


      2、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

      這是一個文檔兼容模式的定義。

              Edge 模式告訴 IE 以最高級模式渲染文檔,也就是任何 IE 版本都以當前版本所支持的最高級標準模式渲染,避免版本升級造成的影響。簡單的說,就是什么版本 IE 就用什么版本的標準模式渲染

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

      使用以下代碼強制 IE 使用 Chrome Frame 渲染

              <meta http-equiv="X-UA-Compatible" content="chrome=1">

      提示 IE 用戶安裝 Google Frame

              Google 官方提供了對 Google Frame 插件安裝情況的檢測,這里直接調用方法即可,如果檢測到 IE 并未安裝 Google Frame,則彈出對話框提示安裝。

      <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>

              最佳的兼容模式方案,結合考慮以上兩種:

      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


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

          一、什么是Viewport

              手機瀏覽器是把頁面放在一個虛擬的“窗口”(viewport)中,通常這個虛擬的“窗口”(viewport)比屏幕寬,這樣就不用把每個網頁擠到很小的窗口中,也不會破壞沒有針對手機瀏覽器優化的網頁的布局,用戶可以通過平移和縮放來看網頁的不同部分。移動版的 Safari 瀏覽器最新引進了viewport 這個 meta tag,讓網頁開發者來控制 viewport 的大小和縮放,其他手機瀏覽器也基本支持。

          二、Viewport基礎


              一個常用的針對移動網頁優化過的頁面的 viewport meta 標簽大致如下:

              1、width : 控制viewport的大小,可以指定一個值,如600, 或者特殊的值,如device-width為設備的寬度(單位是縮放為100%的CSS的像素)


              2、height : 和width相對應,指定高度


              3、initial-scale : 初始縮放比例,頁面第一次加載時的縮放比例


              4、maximum-scale : 允許用戶縮放到的最大比例,范圍從0到10.0


              5、minimum-scale : 允許用戶縮放到的最小比例,范圍從0到10.0


              6、user-scalable : 用戶是否可以手動縮放,值可以是:①yes、 true允許用戶縮放;②no、false不允許用戶縮放


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


              作用:在web app應用下狀態條(屏幕頂部條)的顏色


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


              作用:刪除默認的蘋果工具欄和菜單欄 


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


              作用:禁止把數字轉化為撥號鏈接


             

      返回頂部
      主站蜘蛛池模板: 国产一区玩具在线观看| 亚洲一区二区影视| 精品日韩亚洲AV无码一区二区三区| 亚洲色偷偷偷网站色偷一区| 国产一区二区三区高清在线观看| 国产萌白酱在线一区二区| 在线播放国产一区二区三区| AV无码精品一区二区三区宅噜噜| 国产精品第一区揄拍无码| 亚洲第一区视频在线观看| 国产亚洲一区二区三区在线| 亚洲性日韩精品国产一区二区| 国产精品无码一区二区在线| 亚洲国产精品一区二区久久hs| 一区二区三区影院| 日本一区二区三区不卡视频中文字幕| 中文字幕日韩一区二区不卡| 色婷婷一区二区三区四区成人网 | 久久久久人妻精品一区三寸| 日韩精品无码一区二区三区免费| 久久国产免费一区| 国产精品无圣光一区二区 | 在线精品亚洲一区二区| 精品成人乱色一区二区| 麻豆国产一区二区在线观看| 亚洲Av永久无码精品一区二区| 亚洲国产精品一区二区三区在线观看 | 无码人妻精品一区二区三18禁 | 久久久久人妻一区精品果冻| 国产婷婷一区二区三区| 精品国产不卡一区二区三区| 任你躁国产自任一区二区三区| 精品国产福利第一区二区三区| 福利一区二区三区视频在线观看| 人妻少妇久久中文字幕一区二区| 成人免费观看一区二区| 无码丰满熟妇浪潮一区二区AV| 日本精品一区二区三区在线视频一| 国产成人精品一区在线| 亚洲日本va午夜中文字幕一区| 91视频一区二区三区|