最近和兩個同學在開發一個微信公眾平臺。我在寫一些鏈接頁面時,一開始簡單地寫了一些HTML頁面,在手機上測試顯示ok。后來,一個同學說了我寫的頁面怎么能夠擴大,他給我隨便演示的幾個微信鏈接頁面不能擴大,讓我去改。于是我看了一部分他人的代碼,發現在他們的頁面頭部都有下面這么一部分代碼。
<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已最高級別的可用模式顯示內容。
設置可視區域,傳統桌面瀏覽器就是指除去所有工具欄、狀態欄、滾動條等等之后用于看網頁的區域,移動設備不一樣,需要設置。
width //寬度
initial-scale //初始縮放比例
maximum-scale //允許用戶縮放的最大比例
user-scalable //用戶是否可以用手縮放
下面的設置是針對蘋果設備的
<meta name="apple-mobile-web-app-capable" content="yes">
設置頁面是否全屏顯示,yes,web應用全屏顯示
<meta name="apple-mobile-web-app-status-bar-style" content="black">
設置狀態欄的顏色,content可取default、black、black-translucent,對應默認,黑色和黑色透明。默認和黑色,頁面在工具欄下顯示,黑色透明將全屏顯示
<meta name="format-detection" content="telephone=no">
設置在頁面中是否自動識別電話號碼
body{ -webkit-touch-callout: none; -webkit-text-size-adjust: none; }
webkit-touch-callout:禁用長按彈出效果,none禁用,default使用彈出效果
webkit-text-size-adjust:調整頁面文本大小,none不會自動調整,auto自動調整
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/pc-page1b2f8d.css"/>
IE 9 使用的樣式
<![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"/>
屏幕寬度大于1000px使用的樣式