神奇的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">

<!-- 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>

宽度自适应的部分往往和HandheldFriendly放在一起用。