js控制页面的全屏展示和退出全屏显示

<!DOCTYPE html>    
<html>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<meta http-equiv="Expires" CONTENT="0">
        <meta http-equiv="Cache-Control" CONTENT="no-cache">
        <meta http-equiv="Pragma" CONTENT="no-cache">
        <meta http-equiv="X-UA-Compatible" content="edge" >
<body>    
 
<button id="btn">js控制页面的全屏展示和退出全屏显示</button>    
<div id="content" style=" background:#ccc;position:relative;" >  
<h1>js控制页面的全屏展示和退出全屏显示</h1>    
</div>  


</body>    
<script language="JavaScript">      
document.getElementById("btn").οnclick=function(){     
    var elem = document.getElementById("content");      
    requestFullScreen(elem);     
};     
function requestFullScreen(element) {    
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;    
    if (requestMethod) {      
        requestMethod.call(element);    
    } else if (typeof window.ActiveXObject !== "undefined") {      
        var wscript = new ActiveXObject("WScript.Shell");    
        if (wscript !== null) {    
            wscript.SendKeys("{F11}");    
        }    
    }    
}    
</script>  


<!--
首先建议你用html5来开发,
然后,在网页的<head>中增加以上这句话:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
可以让网页的宽度自动适应手机屏幕的宽度。   
其中:   
width=device-width :表示宽度是设备屏幕的宽度   
initial-scale=1.0:表示初始的缩放比例   
minimum-scale=0.5:表示最小的缩放比例   
maximum-scale=2.0:表示最大的缩放比例   
user-scalable=yes:表示用户是否可以调整缩放比例   
如果是想要一打开网页,则自动以原始比例显示,并且不允许用户修改的话,则是:   
[html] view plaincopy   
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />     
这样子写后,就可以把一些页头横幅等的图片的宽度都设置成style="width:100%",整个页面在设备上看起来就是全屏的了。
 
关键就是调整上面的几个值了。


-->  
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值