iphone的safari浏览器中实现全屏浏览的方法
正常情况下，当你用手机浏览器打开网页时，导航就停留在上面，这样实际展示的屏幕就变小了。
那能不能加载后，屏幕就自动全屏呢？这就是本文要讨论的。
AddtoHomeScreen
说到全屏不得不谈iPhone下的safari有一个特别且重要的功能就是“AddtoHomeScreen”。（就在Safari浏览器最下方，最中间的那个位置，点击选择即可）
这个功能类似于把网页地址作为一个超链接的方式放到手机桌面，并且可以直接访问。不过要注意的是每个链接都需要js进行一次特殊处理，那就是监听页面点击事件，如果是链接，则使用window.location=this.href;，这样页面就不会从当前的本地窗口跳到浏览器了。
那我们看看具体代码是怎么处理的。
其实只需要在HEAD代码里增加一些必要数据：
<metaname="apple-mobile-web-app-capable"content="yes"/><!--homescreenapp全屏--> <metaname="apple-mobile-web-app-status-bar-style"content="black"/><!--状态栏--> <!--还需要额外设置不同尺寸的启动图，默认不设置的话会自动去寻找根目录下的apple-touch-icon-precomposed.png--> <!--homescreenappiPhoneicon--> <linkrel="apple-touch-icon-precomposed"sizes="57x57"href="startup/apple-touch-icon-57x57-precomposed.png"/> <!--homescreenappiPadicon--> <linkrel="apple-touch-icon-precomposed"sizes="72x72"href="startup/apple-touch-icon-72x72-precomposed.png"/> <!--homescreenappiPhoneRetinasicon--> <linkrel="apple-touch-icon-precomposed"sizes="114x114"href="startup/apple-touch-icon-114x114-precomposed.png"/> <!--homescreenappiPadRetinasicon--> <linkrel="apple-touch-icon-precomposed"sizes="144x144"href="startup/apple-touch-icon-144x144-precomposed.png"/> <!--iPhone5启动图--> <linkrel="apple-touch-startup-image"href="startup/startup5.png"media="(device-height:568px)"> <!--iPhone4启动图--> <linkrel="apple-touch-startup-image"size="640x920"href="startup/startup.png"media="(device-height:480px)">
还想了解具体的设置可以参考苹果的官网说明：ConfiguringWebApplications
当然，对启动图，我推荐的做法是只使用一张114*114的图片即可。即：
<linkrel="apple-touch-icon-precomposed"href="startup/apple-touch-icon-114x114-precomposed.png"/>
全屏js代码
window.addEventListener('DOMContentLoaded',function(){
varpage=document.getElementById('page'),
nav=window.navigator,
ua=nav.userAgent,
isFullScreen=nav.standalone;
if(ua.indexOf('Android')!==-1){ //56对应的是AndroidBrowser导航栏的高度 page.style.height=window.innerHeight+56+'px'; }elseif(/iPhone|iPod|iPad/.test(ua)){ //60对应的是Safari导航栏的高度 page.style.height=window.innerHeight+(isFullScreen?0:60)+'px' } setTimeout(scrollTo,0,0,1); },false);