移动端横屏的JS代码(beta)

废话不多说了，直接给大家贴代码了

具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
var orientation=0;
function screenOrientationEvent(){
if(orientation == 0)
{
document.getElementById("change").value="竖";
$("body").css({
'transform':'rotate(90deg)',
'-webkit-transform':'rotate(90deg)',
'-moz-transform':'rotate(90deg)'
});
}
else
{
document.getElementById("change").value="横";
$("body").css({
'transform':'rotate(0deg)',
'-webkit-transform':'rotate(0deg)',
'-moz-transform':'rotate(0deg)'
});
}
}
var innerWidthTmp = window.innerWidth;
//横竖屏事件监听方法
function screenOrientationListener(){
try{
var iw = window.innerWidth;
//屏幕方向改变处理
if(iw != innerWidthTmp){
if(iw>window.innerHeight)
{
orientation = 90;
}
else
{
orientation = 0;
}
//调用转屏事件
screenOrientationEvent();
innerWidthTmp = iw;
}
}
catch(e){alert(e);};
//间隔固定事件检查是否转屏，默认500毫秒
setTimeout("screenOrientationListener()",500);
}
//启动横竖屏事件监听
screenOrientationListener();
</script>
<body onload="screenOrientationEvent()">
<input id="change" type="text" value=""/>
</body>
</html>

以上js代码是实现移动端横屏的核心代码，代码简单易懂，所有没给大家附太多的注释，如果大家哪里有不明白的地方欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • javascript检测移动设备横竖屏

    如何判断 移动设备提供了两个对象,一个属性,一个事件: (1)window.orientation   属于window对象上一个属性:共有三个值 :0为竖屏模式(portrait),90为向左反转变为横屏模式(landscape),-90为向右反转变为横屏模式(landscape),最后180就是设备上下互换还是竖屏模式. (2)orientationchange     是一个event,在设备旋转时,会触发此事件,如同PC上使用的resize事件. 这两个搭配起来使用,很容易就能获得设备的

  • js判断横竖屏及禁止浏览器滑动条示例

    复制代码 代码如下: var $horizontal = $('.horizontal_screen') ; //可自定义横屏模式提示样式 var $document = $(document) ; var preventDefault = function(e) { e.preventDefault(); }; var touchstart = function(e) { $document.on('touchstart touchmove', preventDefault); }; var

  • JS检测移动端横竖屏的代码

    JS检测移动端横竖屏的代码

    使用media来判断屏幕宽度遇到的问题: ios上当我旋转屏幕的时候可行,但是安卓机上没反应,横屏显示的还是我竖屏的样式. 查了一下资料,css3的media如果要在移动端有较好的显示效果,需要在页头加上这段代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 可是这段代码我不能用.因为我

  • JS和css实现检测移动设备方向的变化并判断横竖屏幕

    方法一:用触发手机的横屏和竖屏之间的切换的事件 复制代码 代码如下: window.addEventListener("orientationchange", function() { // 宣布新方向的数值 alert(window.orientation); }, false); 方法二:监听调整大小的改变 复制代码 代码如下: window.addEventListener("resize", function() { // 得到屏幕尺寸 (内部/外部宽度,内

  • 使用JavaScript判断手机浏览器是横屏还是竖屏问题

    //判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") } if(window.orientation==90||window.orientation==-90){ alert("横屏状态!") } } window.addEventListener("onorientationchange" i

  • 移动端横屏的JS代码(beta)

    废话不多说了,直接给大家贴代码了 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"

  • Js动态设置rem来实现移动端字体的自适应代码

    下面一段代码给大家介绍了Js动态设置rem来实现移动端字体的自适应,以此做个记录,方便以后需要,感兴趣的朋友一起看看吧. 具体代码如下所示: //设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width(); //750这个数字是根据你的设计图的实际大小来的,所以值具体根据设计图的大小 var size = (winWidth / 750) * 100; do

  • 基于Jquery代码实现支持PC端手机端幻灯片代码

    基于Jquery代码实现支持PC端手机端幻灯片代码

    分享一款支持PC端手机端幻灯片代码是一款支持移动触摸,支持鼠标拖拽切换,支持带进度条的自动播放模式.交果图如下 : 效果演示        源码下载 html代码: <div class="flex"> <ul class="slides"> <li data-title="Slide 1"> <img alt="" src="img/beasts_feature.jpg&q

  • 前端微信支付js代码

    本文实例为大家分享了前端微信支付js代码,供大家参考,具体内容如下 $('.Save_Patient_Msg').click(function(){ $('.Save_Patient_Msg').off('click'); var hrdfId = getOrderId(); var txnAmt = $('.sum_pay.font-red').html(); var data = {orderId: hrdfId, txnAmt: "0.01", prodDesc: "远

  • 几种延迟加载JS代码的方法加快网页的访问速度

    本文介绍了如何延迟javascript代码的加载,加快网页的访问速度. 当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码 复制代码 代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/

  • ThinkPHP整合datatables实现服务端分页的示例代码

    最近做东西有一个需求,因为数据量很大,在这里我决定使用datatables的服务端分页,同时还需要传递查询条件到服务端.在网上搜索的大部分文章都感觉有些误差,于是自己封装了一下,主要配置/工具为: 服务端:php(使用thinkphp) 页面样式来自于H-ui框架(datatables版本为1.10.0) 主要修改(databases)配置项为: 1) bProcessing:true 使用ajax源 2) serverSide:true 使用服务端分页 3) createdRow:functi

  • 详解vue.js移动端配置flexible.js及注意事项

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕 1.安装lib-flexible.js npm install lib-flexible --save 1.在项目入口文件main.js中引入lib-flexible import 'lib-flexi

  • vue实现PC端录音功能的实例代码

    录音功能一般来说在移动端比较常见,但是在pc端也要实现按住说话的功能呢?项目需求:按住说话,时长不超过60秒,生成语音文件并上传,我这里用的是recorder.js 1.项目中新建一个recorder.js文件,内容如下,也可在百度上直接搜一个 // 兼容 window.URL = window.URL || window.webkitURL navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMed

  • 移动端自适应flexible.js的使用方法(不用三大框架，仅写一个单html页面使用）推荐

    移动端自适应flexible.js的使用方法(不用三大框架，仅写一个单html页面使用）推荐

    第一步: 下载 flexible.js,代码如下,可以复制过去用 ;(function(win, lib) { var doc = win.document var docEl = doc.documentElement var metaEl = doc.querySelector('meta[name="viewport"]') var flexibleEl = doc.querySelector('meta[name="flexible"]') var dpr

  • asp.net 仿微信端菜单设置实例代码详解

    第一步:添加引用文件 <link rel="stylesheet" href="~/assets/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="~/assets/css/font-awesome.min.css" rel="external nofollow"

随机推荐