4 月

WebAPP ViewPort iPhone5 黑边解决方案

星期三, 2013 By bigCat . under Code .

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 然后我们来演示一遍

add-to

在 iOS 里浏览网站的时候可以直接添加到桌面

add-to-home

拉取个图片做 icon

apple-mobile-web-app-title

设置下 Title

一看貌似变身为 APP 了

ip4-startup

启动画面略酷

ip4-startuped

果然是全屏的一个 APP 啊,毫无 PS 痕迹大伙儿可以用 iOS 设备访问 http://miao.in 这个网址来体验下

WebAPP 在 iPhone5 下的黑边 bug

ip5-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 本来就诡异)

» You can leave a comment, or trackback from your own site.

大战 52 回合 to “WebAPP ViewPort iPhone5 黑边解决方案”

小阳说道：

2013-04-11 08:38

作为猫哥的铁杆粉丝，必须经常来学习学习。

回复
大发说道：

2013-04-14 16:51

启动画面略叼

回复
开锁者说道：

2013-04-14 23:17

这种技术贴，难懂。

回复
crystalysoft说道：

2013-04-15 10:31

猫哥，经尝试，去掉了width=device-width，页面变3倍宽了。是这么写的↓ 会不会是屏幕分辨率问题？

回复
- bigCat说道：
  
  2013-04-15 13:25
  
  @crystalysoft 给我url看看
  
  回复
  - cssmagic说道：
    
    2013-06-27 16:37
    
    @bigCat Post author
    
    如果没有指定 `maximum-scale=1`，则旋屏后页面显示比例变大。
  - bigCat说道：
    
    2013-06-29 19:35
    
    @cssmagic 呃,我这里旋转后字变粗了…不过页面和字号貌似没变化… touch4 ios6
  - cssmagic说道：
    
    2013-07-01 16:04
    
    @bigCat Post author
    我手里的 iPhone4 (iOS 5.0) 和 iPod (iOS 4.2) 有此问题。
  - bigCat说道：
    
    2013-07-05 14:20
    
    @cssmagic 抱歉,你是对的,ios6是OK,但是ios5是会变大,谢谢
chisdy说道：

2013-04-18 09:10

这类的文章可以经常有～

回复
小天说道：

2013-04-19 21:09

今天刚好学习web app的知识，又刚好了解了一下viewport

回复
偽ブランド说道：

2013-05-20 13:17

晕。。。你学懂这个。。。真的不错哦。。。呵呵！

回复
cbq926说道：

2013-07-30 18:01

问题已解决~~~thank u！

回复
WebAPP ViewPort iPhone5 黑边解决方案 | 移动终端前端开发日志 TmT.io说道：

2013-10-20 23:13

[…] 原文 http://bigc.at/ios-webapp-viewport-meta.orz […]

回复
meta之viewport – PHP博客 - PHP技术交流说道：

2014-05-10 21:36

[…] 其实更多的涉及到的是iphone5的开发，可参考这篇资料WebApp ViewPort iPhone […]

回复
如何实现发送网址到桌面并变成图标 | segment-解决方案说道：

2014-09-03 09:39

[…] iOS下你可以参考这篇文章。 ————————————————————————— […]

回复
HTML中head头结构 - html - 嗅探实事说道：

2014-10-08 22:41

[…] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz) […]

回复
HTML head 头标签 · 叶中奇说道：

2014-10-17 15:23

[…] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz) […]

回复
HTML head 头标签 - android - html - jobbole - Web前端 - 开发 - 嗅探实事说道：

2014-10-17 15:34

[…] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz) […]

回复
不可小视的head标签 - An's Blog说道：

2014-10-29 12:50

[…] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz) […]

回复
HTML head 头标签 | 老魏的工作笔记说道：

2014-11-05 10:13

[…] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz) […]

回复
HTML head 头标签总结【转自fex】 | i-Ver 爱玩儿说道：

2014-11-11 11:08

[…] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz) […]

回复
HTML head 头标签 - 前端设计说道：

2014-11-18 00:34

[…] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz) […]

回复
常用的 HTML 头部标签 - M我小菜说道：

2014-11-21 17:14

[…] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边http://bigc.at/ios-webapp-viewport-meta.orz […]

回复
HTML中head头结构 | Giuem's Blog说道：

2014-11-23 15:31

[…] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz) […]

回复