熱門文章

      最新文章

      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无码不卡一区二区三区| 国产精品一区二区三区久久 | 国产91一区二区在线播放不卡| 精品视频一区二区| 亚洲第一区香蕉_国产a| 国产日韩一区二区三区在线观看| 亚洲日韩AV一区二区三区中文| 东京热无码av一区二区| 日韩精品国产一区| 亚洲AV网一区二区三区| 奇米精品视频一区二区三区| 中文字幕一区二区视频| 国产一区二区高清在线播放 | 日韩色视频一区二区三区亚洲| 亚洲AV无码一区东京热| 国产成人精品久久一区二区三区av| 亚洲av无码一区二区三区在线播放| 99久久精品费精品国产一区二区| 亚洲成a人一区二区三区| 国产福利无码一区在线| 人妻少妇精品视频一区二区三区 | 精品视频在线观看一区二区| 天堂成人一区二区三区| 天海翼一区二区三区高清视频| 杨幂AV污网站在线一区二区| 国产成人精品一区二区A片带套 | 亚洲美女视频一区二区三区 | 国产一区二区精品久久91| 国产一区二区三区视频在线观看| 亚洲欧美日韩一区二区三区在线 | 日本精品一区二区三区在线视频| 国产福利91精品一区二区三区| 极品尤物一区二区三区| 无码人妻一区二区三区在线水卜樱| 日韩中文字幕精品免费一区| 亚洲AV无码国产一区二区三区| 一区五十路在线中出| 中文字幕精品一区影音先锋| 国产一区二区三区视频在线观看| 国产精品 视频一区 二区三区| 国产一区二区三区不卡观|