Webapp 经验之ios浏览器屏蔽解决方法-职坐标

Webapp 经验之ios浏览器屏蔽解决方法

白羽 2018-06-04 来源：网络阅读 1532 评论 0

摘要：本文将带你了解Webapp 经验之ios浏览器屏蔽解决方法，希望本文对大家学WebApp有所帮助。

   <meta name="viewport" id="viewport" content="width=device-width,
    height=device-height,user-scalable=no" />

为了自适应，一开始通过上面的代码进行自适应，可是用safari调试的时候屏幕的最下方总是有一片空白区域，怎么也去不掉。即使是将该webapp添加到IOS桌面，屏幕下方还是无可避免的有一片空白区域。

从这些现象发现，宽度处理没有问题，但是高度处理有问题。

后来仔细研究发现，width="device-width"和height="device-height"说得是宽度等于该设备的宽度，高度等于该设备的高度。即使是全屏情况下，系统顶部还是会占用一部分的高度，所以导致屏幕的高度超出系统的范围。使得屏幕出现上下滑动的情况。

以下是改了之后的代码，不要添加height="device-height"，上面的情况就可以有效地避免。

<meta name="viewport" id="viewport" content="user-scalable=no" />

现在存在的问题是：当浏览器全屏的情况下，系统顶部的信息不会被隐藏？

现在问题已经解决，增加以下代码：

<meta content="black" name="apple-mobile-web-app-status-bar-style" />

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！

app webapp开发软件 webapp教程

本文由 @白羽发布于职坐标。未经许可，禁止转载。

喜欢 | 0

不喜欢 | 1

看完这篇文章有何感觉？已经有1人表态，0%的人喜欢快给朋友分享吧~

后参与评论

加入IT交流圈

JAVA工程师交流群 +加入

大数据架构师交流群 +加入

人工智能Python交流群 +加入

WEB/H5前端交流群 +加入

移动开发 直通车

海同师资推荐更多>>

热门就业培训班更多>>

Webapp30天热搜词更多>>