本文将带你了解WEBAPP开发之WebAPP ViewPort iPhone5 黑边解决方案，希望本文对大家学微信有所帮助。

WebAPP ViewPort iPhone5 黑边解决方案
     
     
     
     WebAPP ViewPort iPhone5 黑边解决方案
   
   
    CODEX
   
     BY BIGCAT ON APRIL 10, 2013 48 COMMENTS
    ViewPort 详解
    最好先仔细看一遍苹果官方文档 
    Configuring the Viewport 容易被忽略的就是即使 width=640的时候,scale=1是按照device-width而不是按照640的大小
 
举一个栗子: iPhone 的 device-width 等于320,如果我设置 width=640,scale=1
    <meta name = "viewport" content   ="width=640,initial-scale=1.0">
    那么一坨 160px 宽的容器实际上会显示成一半屏幕那么宽而不是以640作为scale=1的基数,显示成1/4屏幕宽
    什么是 WebAPP? 继续看苹果官方文档 
    Configuring Web Applications 然后我们来演示一遍
   
    在 iOS 里浏览网站的时候可以直接添加到桌面
   
    拉取个图片做 icon
   
    设置下 Title
   
    一看貌似变身为 APP 了
   
    启动画面略酷
   
    果然是全屏的一个 APP 啊,毫无 PS 痕迹 大伙儿可以用 iOS 设备访问 //miao.in 这个网址来体验下
WebAPP 在 iPhone5 下的黑边 bug
   
    在设置这句 meta 的时候
<meta name = "viewport" content   ="width=device-width,initial-scale=1.0">
遇到了添加到桌面之后作为 WebAPP 启动后出现上下黑边对,就是生怕别人不知道你是 iPhone5 而上报过来的黑边问题
    经过一系列实(gu)验(ge)之后发现:width=device-width或=320的时候在 iPhone5 下有这个黑边而 initial-scale=1 的时候刚说了,是按照   device-width 来算的
    所以只需要写
    <meta name = "viewport" content   ="initial-scale=1.0,maximum-scale=1,user-scalable=no">
就可以搞定所有 iPhone 了,当然也支持所有 Android网上说width=320.1的,不科学!(当然   iPhone5 本来就诡异)
   
   
   
        

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之webapp频道！