大猫的无限游戏

WebAPP ViewPort iPhone5 黑边解决方案

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

10 4 月, 2013

bigCat

bug, iOS, meta, viewport, WebAPP

《 “WebAPP ViewPort iPhone5 黑边解决方案” 》有 52 条评论

小阳说道：

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) […]

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

2014-12-12 11:29

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

回复
移动前端不得不了解的html5 head 头标签（转） – 趣乐博客说道：

2015-01-10 15:11

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

回复
转：移动前端不得不了解的html5 head 头标签 | HC小智说道：

2015-01-13 09:55

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

回复
移动前端不得不了解的html5 head 头标签 | KevinLi说道：

2015-01-26 11:24

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

回复
移动前端开发不得不了解的html5 head 头标签 – 热前端说道：

2015-01-28 16:07

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

回复
移动前端不得不了解的html5 head 头标签 | 一世浮华一场空说道：

2015-03-15 02:30

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

回复
HTML head 头标签 – 全端网说道：

2015-03-24 11:44

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

回复
HTML head 头标签 | 非比寻常说道：

2015-04-22 21:11

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

回复
HTMl head头部标签 | ｛哎哟麻子｝))))说道：

2015-05-10 10:10

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

回复
天空Seo | HTML head 头标签说道：

2015-05-14 09:53

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

回复
网站meta常用标签 « 黑豆的技术博客-黑豆吧说道：

2015-05-18 18:12

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

回复
移动前端不得不了解的html5 head 头标签 – 剑客|关注科技互联网说道：

2015-05-20 23:47

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

回复
HTML head 头标签 | 爱数据说道：

2015-05-22 16:12

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

回复
HTML head 头标签 | 爱数据说道：

2015-05-22 16:12

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

回复
HTML head 头标签说道：

2015-05-27 11:04

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

回复
HTML head 头标签 | 坦坦荡荡说道：

2015-06-17 11:08

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

回复
HTML head 头标签-iicen说道：

2015-07-08 16:45

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

回复
HTML head 头标签 - web前端|学无止境 - 微笔记[SparkChang.com]说道：

2015-07-19 13:27

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

回复
HTML head 头标签 | 斯迈欧-Web开发说道：

2015-08-26 17:47

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

回复
说说常用的HTML头部标签 | WEB时空说道：

2015-10-06 16:27

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

回复
移动前端HTML头部规范 | AYAO说道：

2016-01-05 09:03

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

回复
Nickname ( required )说道：

2016-01-12 11:12

谢谢分享！！

回复
HTML head 头标签-07客说道：

2016-03-02 06:54

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

回复
移动前端不得不了解的html5 head 头标签 – WEB前端开发 – 专注前端开发，关注用户体验说道：

2016-03-24 15:55

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

回复
关于 HTML 标签 – WebHCJ前端技术博客说道：

2016-04-19 18:17

[…] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边，相关链接：WebAPP ViewPort iPhone5 黑边解决方案 […]

回复
HTML head 头标签详细介绍 – 脚本之家博客说道：

2021-01-10 11:44

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

回复
HTML中head头结构 – 脚本之家博客说道：

2021-01-10 16:38

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

回复

回复 cssmagic 取消回复