html5移动端:手机旋转(js)(jquery)

原创 2016年08月31日 15:29:19

一、html5移动端:手机旋转(js)

<!doctype html>

<html>
  <head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
padding: none;
margin: none;
}
</style>
  </head>
  <body>
    <div id="a">
    旋转手机
    </div>
<script>
function orientationChange() {
   switch(window.orientation) {
     case 0: 
           alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
           break;
     case -90: 
           alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
           break;
     case 90:   
           alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
           break;
     case 180:   
         alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
         break;
   }

   }


  window.addEventListener('orientationchange', orientationChange);

</script>
</body>
</html>

总结:

js : 监听手机旋转事件:orientationchange;切记:js 监听手机旋转属性用:window.orientation; 之前用event.orientation返回null;




一、html5移动端:手机旋转(jquery)

<!doctype html>
<html>
  <head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
padding: none;
margin: none;
}
</style>
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  </head>
  <body>
    <div id="a">手机旋转  jquery
    </div>    
<script>
      $(window).bind('orientationchange',function(event){
        updateOrientation(event.orientation);
      })
function updateOrientation(orientation) {
        $("#a").html("<p>"+orientation.toUpperCase()+"</p>");
}
</script>
</body>
</html>



总结:

jquery : 监听手机旋转事件:orientationchange;切记:jquery监听手机旋转属性用:用event.orientation;


如果是网页版:改造:

<script type="text/javascript">
var evt = "onorientationchange" in window ? "orientationchange" "resize";
      
window.addEventListener(evt, function() {
    alert("屏幕旋转");
}, false);
</script>




 







 

原生JS如何监听移动设备屏幕横竖屏的旋转

到目前JS的强大和所能完成的工作已经不言而喻,然而杯具的发生总是在使用过JS的基础上。代码中监测旋转是用了onorientationchange 函数,但是在一些APP或游戏内嵌页面会有该函数不会执行...
  • China_Guanq
  • China_Guanq
  • 2017年09月13日 10:04
  • 930

html5屏幕旋转事件

在项目开发中发现,屏幕旋转旋转后html界面出现了不同的显示效果,如果在屏幕旋转后重新加载一次界面的话就会显示的相对来说能接受一点,为此如果能监听到屏幕发生了旋转后进行相关的回调处理,则问题会得到解决...
  • ABC__D
  • ABC__D
  • 2016年04月18日 13:25
  • 5488

html5如何获取手机陀螺仪角度信息

html5事件中,deviceorientation事件,此事件是检测设备方向变化时的事件。其常用属性为alpha(x)、beta(y)、gamma(z)。 默认将手机垂直,且正面(90度)冲着自己...
  • tdjqqq
  • tdjqqq
  • 2016年05月18日 15:13
  • 5941

移动端页面的多点触控——旋转

今早在segmentfault上看到一篇文章《超小Web手势库AlloyFinger原理》,最后提到一个多点触控的介绍,因为没写过所以觉得应该蛮有意思,以下是我写完旋转demo后,对问题从分析到解决的...
  • wulixiaoxiao1
  • wulixiaoxiao1
  • 2017年03月10日 14:52
  • 482

移动屏幕旋转解决方法

禁止用户屏幕旋转。 这点可以肯定的说是做不到的,之前因为有项目需要禁止屏幕旋转,所以网上查阅了大量的资料,发现根本没有解决办法,在移动版webkit中根本做不到。苹果api也说明了,我们为了让用...
  • u012011360
  • u012011360
  • 2016年04月19日 11:48
  • 2048

js监听手机屏幕亮度、震动、方向变化

Vibration API Vibration接口用于在浏览器中发出命令,使得设备振动。显然,这个API主要针对手机,适用场合是向用户发出提示或警告,游戏中尤其会大量使用。由于振动操作很耗电,在低...
  • u010081689
  • u010081689
  • 2016年03月29日 11:48
  • 2883

js移动端双指缩放和旋转

在iOS上有一组双指事件gesturestart、gesturechange、gestureend 但是这一组事件只能在iOS上使用,安桌上是没有的...
  • qq_17757973
  • qq_17757973
  • 2017年01月18日 21:17
  • 2790

h5让图片转圈的动效,让页面动起来

h5让图片转圈的动效,让页面动起来 1.先瞧瞧效果: 2.代码是这样的:@mixin ani-btnRotate{ @keyframes btnRotate{ from...
  • a419419
  • a419419
  • 2017年10月12日 15:19
  • 61100

玩转HTML5移动页面——动效篇

作为一名前端,在拿到设计稿时你有两种选择: 1.速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? ...
  • yeana1
  • yeana1
  • 2016年07月26日 16:34
  • 2222

html5移动端:手机旋转(js)(jquery)

一、html5移动端:手机旋转(js)   Mobile Cookbook html, body { padding: none; margin: none; }         ...
  • u010242159
  • u010242159
  • 2016年08月31日 15:29
  • 2849
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5移动端:手机旋转(js)(jquery)
举报原因:
原因补充:

(最多只允许输入30个字)