javascript - Google地图全屏按钮不工作(非google地图应用程序)
javascript - Google地图全屏按钮不工作(非google地图应用程序)
提问于 2017-06-23 14:23:40
如下所示，'+‘图标是全屏按钮。
当点击它时，它不会全屏显示。
我尝试了基本的jQuery：
$("#fullScreen-btn").css({height: 100%, width: 100%});这似乎不起作用。
我需要它像我们在浏览器上按F11一样工作，它必须在移动设备上全屏(不是谷歌地图应用程序)
有人能帮我吗？
回答 3
Stack Overflow用户
发布于 2017-06-27 23:00:37
要使移动浏览器在全屏模式下可见，应使用requestFullscreen()
加载为时，将事件侦听器动态添加到按钮
button.addEventListener("click",function(){
document.body.requestFullscreen();
});或
button.addEventListener("click",function(){
document.documentElement.requestFullscreen();
});适用于android版的Chrome。
此外，许多计算机浏览器也具有此功能。
阅读有关MDN的更多信息
Stack Overflow用户
发布于 2017-06-29 05:37:54
你的jQuery需要更正--你漏掉了引号，试试这个：
$("#fullScreen-elm").css({"height": "100%", "width": "100%"});此外，您需要为想要调整大小的屏幕元素而不是全屏按钮更新此css。
是的，Element.requestFullscreen()绝对是refer MDN的另一个选择
Stack Overflow用户
发布于 2017-07-04 17:21:12
尝尝这个。为了得到结果，我单独计算了高度。已在android设备上测试。
$(document).ready(function() {
let height = $(document).height();
$('.fullscreen').on('click', function() {
$('iframe').css({
height: height,
width: '100%'
});
});
});body {
margin: 0;
padding: 0;
}
.fullscreen {
position: absolute;
top: 10px;
right: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d423283.3363121453!2d-118.69191670818714!3d34.020750397391296!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA%2C+USA!5e0!3m2!1sen!2srw!4v1499159650271"
width="250" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
<div class="container">
<input type="button" name="fullscreen" value="fullscreen" class="fullscreen" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44714405
复制相关文章
相似问题
腾讯云开发者
