學電腦,學計算機 | 手機訪問 | 加入收藏 | 設為首頁 | RSS
當前位置:首頁 > 網頁制作 > HTML/CSS > 正文

html5手機網站需要加的那些meta/link標簽,html5 meta全解

發布時間:2016-10-16 21:31:47  來源:電腦技術學習網
【摘要】: 本文為您介紹 大眾機型html5手機網站需要加的那些meta/link標簽。

一、大眾機型常用meta標簽name的設置

1、name之viewport

<meta name="viewport" content="">
說明:屏幕的縮放

content的幾個屬性:

    width viewport的寬度[device-width | pixel_value]width如果直接設置pixel_value數值,大部分的安卓手機不支持,但是ios支持;

    height – viewport 的高度 (范圍從 223 到 10,000 )

    user-scalable [yes | no]是否允許縮放

    initial-scale [數值] 初始化比例(范圍從 > 0 到 10)

    minimum-scale [數值] 允許縮放的最小比例

    maximum-scale [數值] 允許縮放的最大比例

    target-densitydpi 值有以下(一般推薦設置中等響度密度或者低像素密度,后者設置具體的值dpi_value,另外webkit內核已不準備再支持此屬性)

         -- dpi_value 一般是70-400//沒英寸像素點的個數

         -- device-dpi設備默認像素密度

         -- high-dpi 高像素密度

         -- medium-dpi 中等像素密度

         -- low-dpi 低像素密度

完整案例:

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

2、name之format-detection忽略電話號碼和郵箱

<meta name="format-detection" content="telephone=no">
說明:忽略頁面中的數字識別為電話號碼
<meta name="format-detection" content="email=no"/>

說明:忽略頁面中的郵箱格式為郵箱

也可以寫成:

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

3、name之設置作者姓名及聯系方式

說明:設置作者姓名及聯系方式

<meta name="author" contect="name, [email protected]" />

4、其他

    <!-- 聲明文檔使用的字符編碼 -->
    <meta charset='utf-8'>

    <!-- 優先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!-- 頁面描述 -->
    <meta name="description" content="不超過150個字符"/>

    <!-- 頁面關鍵詞 -->
    <meta name="keywords" content=""/>

    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>

    <!-- 啟用360瀏覽器的極速模式(webkit) -->
    <meta name="renderer" content="webkit">

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

    <!-- 不讓百度轉碼 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <!-- 針對手持設備優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓 -->
    <meta name="HandheldFriendly" content="true">

    <!-- 微軟的老式瀏覽器 -->
    <meta name="MobileOptimized" content="320">

    <!-- uc強制豎屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ強制豎屏 -->

    <meta name="x5-orientation" content="portrait">
    <!-- UC強制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ強制全屏 -->

    <meta name="x5-fullscreen" content="true">
    <!-- UC應用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ應用模式 -->
    <meta name="x5-page-mode" content="app">
  

    <!-- 添加 RSS 訂閱 -->
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

    <!-- 添加 favicon icon -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>


    <!-- sns 社交標簽 begin -->
        <!-- 參考微博API -->
        <meta property="og:type" content="類型" />
        <meta property="og:url" content="URL地址" />
        <meta property="og:title" content="標題" />
        <meta property="og:image" content="圖片" />
        <meta property="og:description" content="描述" />
    <!-- sns 社交標簽 end -->


    <!-- Windows 8 磁貼顏色 -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁貼圖標 -->
    <meta name="msapplication-TileImage" content="icon.png"/>

     <!-- windows phone 點擊無高光 -->
    <meta name="msapplication-tap-highlight" content="no">

 1/5    1 2 3 4 下一頁 尾頁
發表評論 共有條評論
驗證碼:
湖北省福彩30选5开奖