JavaScript HTML5 手机网站 基本功能

让网页的宽度自适应屏幕<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属性。这让你的定制更具有 灵活性。