大猫 (Madao) - まるでダメなおっさん

WebAPP ViewPort iPhone5 黑边解决方案

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

add-to

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

add-to-home

拉取个图片做 icon

apple-mobile-web-app-title

设置下 Title

home-icon

一看貌似变身为 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 本来就诡异)

Comments ( 50 )

  1. Reply小阳
    作为猫哥的铁杆粉丝,必须经常来学习学习。
  2. Reply大发
    启动画面略叼
  3. Reply开锁者
    这种技术贴,难懂。
  4. Replycrystalysoft
    猫哥,经尝试,去掉了width=device-width,页面变3倍宽了。是这么写的↓ 会不会是屏幕分辨率问题?
    • ReplybigCat
      @crystalysoft 给我url看看
      • Replycssmagic
        @bigCat Post author 如果没有指定 `maximum-scale=1`,则旋屏后页面显示比例变大。
        • ReplybigCat
          @cssmagic 呃,我这里旋转后字变粗了...不过页面和字号貌似没变化... touch4 ios6
          • Replycssmagic
            @bigCat Post author 我手里的 iPhone4 (iOS 5.0) 和 iPod (iOS 4.2) 有此问题。
            • ReplybigCat
              @cssmagic 抱歉,你是对的,ios6是OK,但是ios5是会变大,谢谢
  5. Replychisdy
    这类的文章可以经常有~
  6. Reply小天
    今天刚好学习web app的知识,又刚好了解了一下viewport
  7. Reply偽ブランド
    晕。。。你学懂这个。。。真的不错哦。。。呵呵!
  8. Replycbq926
    问题已解决~~~thank u!
  9. WebAPP ViewPort iPhone5 黑边解决方案 | 移动终端前端开发日志 TmT.io
    […] 原文 http://ooxx.me/ios-webapp-viewport-meta.orz […]
  10. meta之viewport – PHP博客 - PHP技术交流
    […] 其实更多的涉及到的是iphone5的开发,可参考这篇资料WebApp ViewPort iPhone […]
  11. 如何实现发送网址到桌面并变成图标 | segment-解决方案
    […] iOS下你可以参考这篇文章。 ————————————————————————— […]
  12. HTML中head头结构 - html - 嗅探实事
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  13. HTML head 头标签 · 叶中奇
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  14. HTML head 头标签 - android - html - jobbole - Web前端 - 开发 - 嗅探实事
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  15. 不可小视的head标签 - An's Blog
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  16. HTML head 头标签 | 老魏的工作笔记
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  17. HTML head 头标签 总结【转自fex】 | i-Ver 爱玩儿
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  18. HTML head 头标签 - 前端设计
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  19. 常用的 HTML 头部标签 - M我小菜
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边http://ooxx.me/ios-webapp-viewport-meta.orz […]
  20. HTML中head头结构 | Giuem's Blog
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  21. 常用的 HTML 头部标签 | M我小菜
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边http://ooxx.me/ios-webapp-viewport-meta.orz […]
  22. 移动前端不得不了解的html5 head 头标签(转) – 趣乐博客
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  23. 转:移动前端不得不了解的html5 head 头标签 | HC小智
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  24. 移动前端不得不了解的html5 head 头标签 | KevinLi
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  25. 移动前端开发不得不了解的html5 head 头标签 – 热前端
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  26. 移动前端不得不了解的html5 head 头标签 | 一世浮华一场空
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  27. HTML head 头标签 – 全端网
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  28. HTML head 头标签 | 非比寻常
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  29. HTMl head头部标签 | {哎哟麻子}))))
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  30. 天空Seo | HTML head 头标签
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  31. 网站meta常用标签 « 黑豆的技术博客-黑豆吧
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  32. 移动前端不得不了解的html5 head 头标签 – 剑客|关注科技互联网
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  33. HTML head 头标签 | 爱数据
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  34. HTML head 头标签 | 爱数据
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  35. HTML head 头标签
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  36. HTML head 头标签 | 坦坦荡荡
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  37. HTML head 头标签-iicen
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  38. HTML head 头标签 - web前端|学无止境 - 微笔记[SparkChang.com]
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  39. HTML head 头标签 | 斯迈欧-Web开发
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  40. 说说常用的HTML头部标签 | WEB时空
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  41. 移动前端HTML头部规范 | AYAO
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  42. ReplyNickname ( required )
    谢谢分享!!
  43. HTML head 头标签-07客
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  44. 移动前端不得不了解的html5 head 头标签 – WEB前端开发 - 专注前端开发,关注用户体验
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://ooxx.me/ios-webapp-viewport-meta.orz) […]
  45. 关于 HTML 标签 – WebHCJ前端技术博客
    […] width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边,相关链接:WebAPP ViewPort iPhone5 黑边解决方案 […]

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>