熱門文章

      最新文章

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


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


             

      返回頂部
      主站蜘蛛池模板: 精品国产高清自在线一区二区三区 | 无码国产精品一区二区免费模式 | 一区二区三区91| 国产午夜三级一区二区三| 亚洲一区二区三区免费观看| 国产无线乱码一区二三区| 精品理论片一区二区三区| 久久精品无码一区二区三区免费| 91福利国产在线观一区二区| 久久精品国产亚洲一区二区| 亚洲国产一区二区三区| 国产小仙女视频一区二区三区| 久久精品亚洲一区二区三区浴池| 久久免费精品一区二区| 国产亚洲一区二区三区在线观看| 久久久久女教师免费一区| 亚洲一区二区三区免费| 精品视频一区二区三区| 中文字幕在线视频一区| 精品成人av一区二区三区| 一区免费在线观看| 亚洲中文字幕丝袜制服一区 | 精品一区二区三区AV天堂| 久久中文字幕无码一区二区 | 国模私拍一区二区三区| 国产精品无码一区二区三级| 中文日韩字幕一区在线观看| 中文字幕在线视频一区| 日韩精品在线一区二区| 亚洲高清日韩精品第一区| 3D动漫精品一区二区三区| 在线播放精品一区二区啪视频| 国产一区二区不卡老阿姨| 精品国产日韩亚洲一区91| 精品乱码一区内射人妻无码| 一区二区日韩国产精品| 国产成人精品无码一区二区三区 | 日韩AV无码一区二区三区不卡毛片 | 精品国产亚洲一区二区三区| 国产成人无码一区二区三区| 精品人妻系列无码一区二区三区|