标签：
让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/>
1）html上加入<meta name="viewport" content=" initial-scale=1.0,user-scalable=no" />
发确保网页的效果
2）加上以下语句可使网页在苹果设备上运行更好
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
3）加入这句话可以定义iphone的添加到主屏幕的图标
<link rel="apple-touch-icon" href="/images/logo.png" />
autocomplete="off"//去掉输入框的历史记录
querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。
querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。
<!------IE8以及以下不支持HTML5的解决办法------>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />// 控制手机全屏 ： 强制让文档的宽度与设备的宽度保持1:1， 并且文档最大的宽度比例 是1.0，且不允许用户点击屏幕放大浏览
//viewport:可视区域
//initial-scale:初始的缩放比例;user-scalable:用户是否可以手动缩放;
//minimum-scale:允许用户缩放的最小比例;maximum-scale :允许用户缩放的最大比例
<meta name="format-detection" content="telephone=no"/>//在手机中不会将网页中的一串数字(电话号码)显示为拨号的超链接,默认telephone=yes
<meta name=”apple-mobile-web-app-capable” content=”yes” />//删除黙认的苹果菜单栏和工具栏,如需要苹果菜单栏和工具栏可不加
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />//控制状态栏样式content有三个值：default、black、black-translucent
<link rel="apple-touch-icon" href="res/images/icon.png" />//对移动网站-mobile web进行收藏（“添加到桌面图标”）的时候增加的图标定义属性
//apple-touch-icon:增加高光光亮的图标
//apple-touch-icon-precomposed:设计原图图标
网页针对不同屏幕分辨率修改，用-webkit-device-pixel-ratio这个media标签或在js中用 window.devicePixelRatio这个方法，设置target-densitydpi标签和device-dpi属性。这让你的定制更具有 灵活性。
标签：
原文地址：http://www.cnblogs.com/dexian/p/4631159.html
