移动端横屏的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代码是实现移动端横屏的核心代码,代码简单易懂,所有没给大家附太多的注释,如果大家哪里有不明白的地方欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对我们网站的支持!
相关推荐
-
使用JavaScript判断手机浏览器是横屏还是竖屏问题
//判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") } if(window.orientation==90||window.orientation==-90){ alert("横屏状态!") } } window.addEventListener("onorientationchange" i
-
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检测移动端横竖屏的代码
使用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检测移动设备横竖屏
如何判断 移动设备提供了两个对象,一个属性,一个事件: (1)window.orientation 属于window对象上一个属性:共有三个值 :0为竖屏模式(portrait),90为向左反转变为横屏模式(landscape),-90为向右反转变为横屏模式(landscape),最后180就是设备上下互换还是竖屏模式. (2)orientationchange 是一个event,在设备旋转时,会触发此事件,如同PC上使用的resize事件. 这两个搭配起来使用,很容易就能获得设备的
-
移动端横屏的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端手机端幻灯片代码
分享一款支持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,代码如下,可以复制过去用 ;(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"
随机推荐
- VBS编程教程 (第4篇)
- vbs sendmail发邮件带附件方法
- javascript瀑布流式图片懒加载实例解析与优化
- 老生常谈Javascript中的原型和this指针
- thinkPHP下的widget扩展用法实例分析
- PHP递归调用数组值并用其执行指定函数的方法
- Yii框架form表单用法实例
- spring boot实战之使用JSP的示例
- c病毒程序原理分析(防范病毒 c语言小病毒示例)
- jQuery学习笔记之jQuery.fn.init()的参数分析
- jQuery实现瀑布流的取巧做法分享
- 使用Rhino让java执行javascript的方法实例
- 添加到收藏夹的Javascript脚本 for ie,firefox
- php日历制作代码分享
- Linux(Ubuntu) adb 无法识别的问题解决方法
- Ubuntu16.04搭建NFS 文件共享服务器的方法
- vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
- mysql5.7以上版本配置my.ini的详细步骤
- Centos7安装配置tomcat9并设置自动启动的方法
- 浅析vue插槽和作用域插槽的理解