神奇的meta

 ​<!-- 针对手持设备优化，主要是针对一些老的不识别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">

<!--禁止浏览器修改页面字体大小 -->

手机站中有些浏览器为了优化用户体验，在页面上文字较多的时候会自动放大字体。然而放大字体可能不是你所需要的，所以就有了以下meta内容去掉此浏览器功能。

<meta name="wap-font-scale" content="no"> 

<!-- QQ应用模式 -->

<meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 -->

<meta name="msapplication-tap-highlight" content="no">

 viewport属性中content中的width值（640）是页面的基础宽度，即设计图的宽度，如果设计的基础宽度是1080，则将基础宽度设置为1080即可，phoneScale 这个值中除数也换成1080。phoneScale的值是页面初始化时页面的缩放比例。页面上所有的宽度高度按照设计图上的宽度高度字体大小设置。浏览器可根据phoneScale的大小设置页面上元素的缩放。代码如下：

<script type="text/javascript">
var phoneScale = parseInt(window.screen.width) / 640;
document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ',initial-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
</script>

meta中viewport往往和HandheldFriendly放在一起用。

不缓存页面，代码如下：

<meta http-equiv="pragma" content="no-cache" />

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－我是华丽分割线－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－