Mobile Web App一个页面的简单的东…

<meta name="viewport" content="width=device-width"/>

viewport：手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中

width : 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度

 

 <meta name= format-detection content= telephone=no/>

telephone=no：就禁止了把数字转化为拨号链接！

 

 <meta name="" content="" />

name：是作者名

content：是网站的内容

 

vertical-align:middle;

把此元素放置在父元素的中部。

 

document.addEventListener("DOMContentLoaded", domLoaded，false);

DOMContentLoaded：发生在DOM加载完成，支持非IE

最后一个属性设置该事件的响应顺序；

true的话将是最先触发

顺序为 addEventListener->标签的onclick事件->document.onclick　

false的话是最后触发

顺序为 标签的onclick事件->document.onclick->addEventListener

 

 

这个是腾讯Q立方里面设置屏幕分辨率的代码，感觉一大堆问题

function domLoaded(width, height)

{

         If(screen.width >= 480)  ß不知道为什么连if都写错

         {

         document. querySelector('html').style.width = screen.width + 'px';

         return;

         }

         width= (width == undefined) ? 480 : width;     ßwidth传进来是个Object Event类型

                   height= (height== undefined) ? 762: height;

                   document. querySelector('html').style.width = width + 'px';

                   var zoomRatio = screen.height / height;

                   document. querySelector('html').style.zoom = zoomRatio ;

}

可以说，即使是删除这个函数操作，对页面也没影响。之所以能在移动端能够正确显示，是因为它body里面的div有设置宽度

.link-box{ width:320px; margin:10px auto;}

querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素

querySelector方法兼容性：FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;

 

屏幕分辨率的高：window.screen.height

屏幕分辨率的宽： window.screen.width

 

总结，其实移动端的web，css样式是跟写PC端的一样的。当然，移动端最简单就是开发一个新的web应用，单独支持移动端。要想PC端的网站也能在移动端正常显示，就要编写兼容的css。