存档

文章标签 ‘webview’

IOS打开webview全面屏幕底部黑条兼容解决方案

2020年12月7日 评论已被关闭

IOS打开webview全面屏幕底部黑条兼容解决方案:

第一种是在不知道是否是全面屏的情况下:
需要在meta中增加:增加viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

env() 和 constant():
iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:
safe-area-inset-left:安全区域距离左边边界距离
safe-area-inset-right:安全区域距离右边边界距离
safe-area-inset-top:安全区域距离顶部边界距离
safe-area-inset-bottom:安全区域距离底部边界距离
padding-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 / padding-bottom: env( safe-area-inset-bottom); / 兼容 iOS >= 11.2 */
env() 跟 constant() 需要同时存在,而且顺序不能换。

第二种是webview知道是全面屏,直接给底部增加像素即可(一般是客户端通过url传递参数,比如:fullscreen=yes)

效果如下:

IOS打开webview全面屏幕底部黑条兼容解决方案
分类: html总结 标签: , , ,

android安卓WebView如何保留缩放功能但隐藏缩放控件

2015年10月22日 没有评论

mWebView.getSettings().setSupportZoom(true);
mWebView.getSettings().setBuiltInZoomControls(true);
mWebView.getSettings().setDisplayZoomControls(false);

注意:setDisplayZoomControls是在API Level 11中新增。

分类: android 标签: , , ,
css.php