其实注意到webapp这个东西是因为wptouchpro 2.7在iPhone5上生成的WebApp在打开之后不能全屏,上面跟下面有黑边,看起来会场蛋疼的说。
作为一个完美主义者怎么可以容忍这种事情发生呢,其实修改方法也比较简单,直接编辑如下两个文件中的代码修改为如下内容即可:
wptouch-pro\themes\classic\includes\theme.php
114 115 116 117 118 119 120 121 122 123 124 | // lock the viewport as 1:1, no zooming, unless enabled for mobile if ( $ipad || !classic_mobile_enable_zoom() ) { echo "<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=no' /> \n"; } else { echo "<meta name='viewport' content='initial-scale=1.0, maximum-scale=2.0, user-scalable=yes' /> \n"; } if ( $settings->classic_webapp_enabled ) { echo "<meta name='apple-mobile-web-app-status-bar-style' content='" . $status_type . "' /> \n"; echo "<meta name='apple-mobile-web-app-capable' content='yes' /> \n"; } |
wptouch-pro\themes\skeleton\iphone\functions.php
29 30 31 32 33 34 35 36 37 38 39 40 41 42 | // This spits out all the meta tags fopr iPhone/iPod touch/iPad stuff // (web-app, startup img, device width, status bar style) function wptouch_theme_iphone_meta() { $settings = wptouch_get_settings(); $status_type = $settings->wptouch_theme_webapp_status_bar_color; echo "<meta name='apple-mobile-web-app-capable' content='yes' /> \n"; echo "<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=no' /> \n"; echo "<meta name='apple-mobile-web-app-status-bar-style' content='" . $status_type . "' /> \n"; if ( $settings->wptouch_theme_webapp_use_loading_img ) { echo "<link rel='apple-touch-startup-image' href='" . wptouch_get_bloginfo('template_directory') . "/images/startup.png' /> \n"; } } |
I found on this post that all that is required is that you remove width=device-width from the viewport meta tag. The blog talks about specifying a startup image, but this appears to be optional.
Edit: Original source of answer is Max Firtman. He indicates it may be a bug as well (see comments), but for now, this solution works.
修改之后的效果:
另外一个办法直接升级2.8.2这个问题就没了。
参考链接:
http://taylor.fausak.me/2012/09/20/iphone-5-web-app-startup-image/
http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-startup-images/
http://stackoverflow.com/questions/12656200/how-can-i-make-my-web-app-iphone-5-compatible
原创文章,转载请注明: 转载自 obaby@mars
本文标题: 《iPhone 5 Web App 全屏》
本文链接地址: http://www.h4ck.org.cn/2013/05/iphone-5-web-app-%e5%85%a8%e5%b1%8f/