微信公衆平臺頁面小結

最近和兩個同窗在開發一個微信公衆平臺。我在寫一些連接頁面時，一開始簡單地寫了一些HTML頁面，在手機上測試顯示ok。後來，一個同窗說了我寫的頁面怎麼可以擴大，他給我隨便演示的幾個微信連接頁面不能擴大，讓我去改。因而我看了一部分他人的代碼，發如今他們的頁面頭部都有下面這麼一部分代碼。

<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/client-page1baa9e.css"/>
    <!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/pc-page1b2f8d.css"/>
    <![endif]-->
    <link media="screen and (min-width:1000px)" rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/pc-page1b2f8d.css"/>
    <style>
        body{ -webkit-touch-callout: none; -webkit-text-size-adjust: none; }
    </style>
    <script type="text/javascript">
        document.domain = "qq.com";
        var _wxao = window._wxao || {};
        _wxao.begin = (+new Date());
    </script>

我沒有深刻研究過HTML的meta標籤，我上網查了資料，才弄明白怎麼回事。

X-UA-Compatible是IE8專有的標記，是用來指定Internet Explorer 8瀏覽器模擬摸個特定版本IE瀏覽器的渲染方式，以此來解決IE瀏覽器的兼容問題。Edge 模式 通知Windows Internet Explorer已最高級別的可用模式顯示內容。

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

設置可視區域，傳統桌面瀏覽器就是指除去全部工具欄、狀態欄、滾動條等等以後用於看網頁的區域，移動設備不同，須要設置:
1. width //寬度
2. initial-scale //初始縮放比例
3. maximum-scale //容許用戶縮放的最大比例
4. user-scalable //用戶是否能夠用手縮放

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

下面的設置是針對蘋果設備的

設置頁面是否全屏顯示，yes，web應用全屏顯示

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

設置狀態欄的顏色，content可取default、black、black-translucent，對應默認，黑色和黑色透明。默認和黑色，頁面在工具欄下顯示，黑色透明將全屏顯示

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

設置在頁面中是否自動識別電話號碼

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

webkit-touch-callout:禁用長按彈出效果，none禁用，default使用彈出效果
webkit-text-size-adjust：調整頁面文本大小，none不會自動調整，auto自動調整

body{ -webkit-touch-callout: none; -webkit-text-size-adjust: none; }

IE 9 使用的樣式

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/pc-page1b2f8d.css"/>

屏幕寬度大於1000px使用的樣式

<![endif]-->
<link media="screen and (min-width:1000px)" rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/pc-page1b2f8d.css"/>

參考資料

1. http://www.cnblogs.com/chenqiang001/archive/2012/01/05/2312808.html
2. http://blog.sina.com.cn/s/blog_4dffbd380100kvht.html