标签：
?<!-- 针对手持设备优化，主要是针对一些老的不识别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放在一起用。
标签：
原文地址：http://www.cnblogs.com/czyblog/p/4602577.html
