移动端webapp 全屏

最新推荐文章于 2023-04-08 10:34:50 发布

原创

最新推荐文章于 2023-04-08 10:34:50 发布 · 848 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#webapp #移动端web全屏 #html

在使用Vux开发移动端WebApp时，发现地址栏和工具栏占据了大量屏幕空间。通过在项目根目录的index.html头部添加特定的meta标签，如`viewport`、`apple-mobile-web-app-capable`、`full-screen`和`x5-fullscreen`，可以实现全屏效果。在iOS设备上，需要将网页添加到桌面快捷方式以实现全屏，而在UC浏览器中，部分机型可以直接全屏显示。

使用vux开发一款手机webapp，在手机上看到地址栏和下面的工具栏占了很大一部分空间，就想可不可以去掉。最终找到了解决办法。我用的是vue cli生成的模板，在项目根目录下的index.html头部加上下面内容：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="screen-orientation" content