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

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

  1. crystalysoft

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

  2. Pingback: WebAPP ViewPort iPhone5 黑边解决方案 | 移动终端前端开发日志 TmT.io

  3. Pingback: meta之viewport – PHP博客 - PHP技术交流

  4. Pingback: 如何实现发送网址到桌面并变成图标 | segment-解决方案

  5. Pingback: HTML中head头结构 - html - 嗅探实事

  6. Pingback: HTML head 头标签 · 叶中奇

  7. Pingback: HTML head 头标签 - android - html - jobbole - Web前端 - 开发 - 嗅探实事

  8. Pingback: 不可小视的head标签 - An's Blog

  9. Pingback: HTML head 头标签 | 老魏的工作笔记

  10. Pingback: HTML head 头标签 总结【转自fex】 | i-Ver 爱玩儿

  11. Pingback: HTML head 头标签 - 前端设计

  12. Pingback: 常用的 HTML 头部标签 - M我小菜

  13. Pingback: HTML中head头结构 | Giuem's Blog

  14. Pingback: 常用的 HTML 头部标签 | M我小菜

  15. Pingback: 移动前端不得不了解的html5 head 头标签(转) – 趣乐博客

  16. Pingback: 转:移动前端不得不了解的html5 head 头标签 | HC小智

  17. Pingback: 移动前端不得不了解的html5 head 头标签 | KevinLi

  18. Pingback: 移动前端开发不得不了解的html5 head 头标签 – 热前端

  19. Pingback: 移动前端不得不了解的html5 head 头标签 | 一世浮华一场空

  20. Pingback: HTML head 头标签 – 全端网

  21. Pingback: HTML head 头标签 | 非比寻常

  22. Pingback: HTMl head头部标签 | {哎哟麻子}))))

  23. Pingback: 天空Seo | HTML head 头标签

  24. Pingback: 网站meta常用标签 « 黑豆的技术博客-黑豆吧

  25. Pingback: 移动前端不得不了解的html5 head 头标签 – 剑客|关注科技互联网

  26. Pingback: HTML head 头标签 | 爱数据

  27. Pingback: HTML head 头标签 | 爱数据

  28. Pingback: HTML head 头标签

  29. Pingback: HTML head 头标签 | 坦坦荡荡

  30. Pingback: HTML head 头标签-iicen

  31. Pingback: HTML head 头标签 - web前端|学无止境 - 微笔记[SparkChang.com]

  32. Pingback: HTML head 头标签 | 斯迈欧-Web开发

  33. Pingback: 说说常用的HTML头部标签 | WEB时空

  34. Pingback: 移动前端HTML头部规范 | AYAO

  35. Pingback: HTML head 头标签-07客

  36. Pingback: 移动前端不得不了解的html5 head 头标签 – WEB前端开发 - 专注前端开发,关注用户体验

  37. Pingback: 关于 HTML 标签 – WebHCJ前端技术博客

Leave a Comment

电子邮件地址不会被公开。