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>




 







 

相关文章推荐

html5屏幕旋转事件

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

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

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

AR移动端缩放和旋转

using UnityEngine;using System.Collections; public class Gesture : MonoBehaviour { private Touch old...
  • x100568
  • x100568
  • 2017年01月16日 09:35
  • 287

移动端单指拖 双值旋转缩放(修改版)

demo 修改内容:修改了缩放或者扩大后元素溢出边框的BUG,获取了缩放或者扩大的区间值进行计算,具体差别可以看上一篇博客对比一下代码就知道了。 222 ...

js移动端双指缩放和旋转

在iOS上有一组双指事件gesturestart、gesturechange、gestureend 但是这一组事件只能在iOS上使用,安桌上是没有的...

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

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

javaScript+turn.js实现图书翻页效果

为了实现图书翻页的效果   我们在网上可以看到很多教程     在这里   推荐turn.js     网上的turn.js 有api  不过是英文的  很多人看起来不方便   关于代码也是奇形怪状 ...

html5+exif.js+canvas实现手机端照片上传预览、压缩、旋转功能

html5+exif.js+canvas实现手机端照片上传预览、压缩、旋转功能 图片上传 上传图片: ...
  • linlzk
  • linlzk
  • 2015年09月22日 15:34
  • 16139

html5+exif.js+canvas实现手机端照片上传预览、压缩、旋转功能

HTML5+canvas进行移动端手机照片上传时,发现iOS手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非...

html5+exif.js+canvas实现手机端照片上传预览、压缩、旋转功能

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。 因此解决这个问题的思路是:获取到照片拍摄的方向角...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5移动端:手机旋转(js)(jquery)
举报原因:
原因补充:

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