javascript判断iphone/android手机横竖屏模式的函数

查了不少资料，最后结论如下：


代码如下:

function orientationChange(){
switch(window.orientation) {
case 0: // Portrait
case 180: // Upside-down Portrait
// Javascript to setup Portrait view
break;
case -90: // Landscape: turned 90 degrees counter-clockwise
case 90: // Landscape: turned 90 degrees clockwise
// Javascript to steup Landscape view
break;
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", orientationChange, false);

赞 (0)

相关推荐

  • 使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)

    WEB开发中如何通过Javascript来判断终端为PC.IOS(iphone).Android呢? 可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. var u = navigator.userAgent; isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS

  • js判断手机端(Android手机还是iPhone手机)

    网上常用的代码 /** * [isMobile 判断平台] * @param test: 0:iPhone 1:Android */ function ismobile(test){ var u = navigator.userAgent, app = navigator.appVersion; if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alca

  • JS辨别访问浏览器判断是android还是ios系统

    项目中需要扫描二维码之后自动分辨出是android还是ios系统,针对于不同的系统进行不同的下载. <script type="text/javascript"> /* * 智能机浏览器版本信息: * */ var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexO

  • js判断客户端是iOS还是Android等移动终端的方法

    判断原理: JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断的.在许多情况下,值判断出浏览器类型之后,还需判断浏览器版本才能处理兼容性问题,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道. 浏览器类型 ⑴浏览器特有属性 ⑵根据userAgent 浏览器版本 ⑴根据userAge

  • js判断手机系统是android还是ios

    话不多说,请看代码: <script type="text/javascript"> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 alert('是否是Android

  • javascript判断iphone/android手机横竖屏模式的函数

    查了不少资料,最后结论如下: 复制代码 代码如下: function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-down Portrait // Javascript to setup Portrait view break; case -90: // Landscape: turned 90 degrees counter-clockwise case 90

  • 使用JS判断移动端手机横竖屏状态

    禁用用户自动缩放功能: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 判断横竖屏状态有两种方法:css判断.js判断 (一).css判断横屏还是竖屏 1.写在同一个css文件中 @media screen and (orientation: portrait) { /*竖屏 css*/ }

  • Android Activity 横竖屏切换的生命周期

    Android Activity 横竖屏切换的生命周期

    前言 在开发中常要处理横竖屏切换,怎么处理先看生命周期 申明 Activity 横竖屏切换时需要回调两个函数 ,所以在此将这个两个函数暂时看成是Activity 横竖屏切换的生命周期的一部分,这两个函数如下 onSaveInstanceState(Bundle outState) :Activity 即将销毁时保存数据 onRestoreInstanceState(Bundle savedInstanceState) : Activity 重建或者恢复时候取出数据 横竖屏切换生命周期 1.启动程

  • 浅谈android Fragment横竖屏翻转对重新加载的要求

    有时候,我们在同一个activity里面有很多fragment,在横竖屏的时候,有些fragment要求重新加载数据,有些不需要,如何简单控制这些需求,本人分享一点小经验,欢迎大家指正里面的错误. 大家都知道横竖屏翻转的时候,activity会重启,fragment也会重新加载,如果现在要求在横竖屏翻转的时候,同一个activity中,一个fragment要重新加载,一个不要重新加载,那该怎么办呢? 如果在activity里面继承了onConfigurationChanged这个方法之后,这个a

  • Android实现横竖屏切换的实例代码

    Android实现横竖屏切换的实例代码

    这几年一直在做手机上和电视盒的App,几乎没有考虑过横竖屏切换的问题.电视盒好说,横屏不变,你要是给它设计个竖屏人家也没机会使:而手机上的应用就不好说了,有些界面你设计了横竖屏兼容可能是为了表示你的功能强大.但是按照惯例,或许也是设计师图省事,我们只是做一个方案.就像目前主流的App都只有竖屏一个模式,比如微信.京东和招商银行.我截了几张图表示一下. 但是像地图之类的应用,也许横屏会显示的更友好一些.请看腾讯地图的设计如下: 细心的你会发现,地图的横竖屏的样式几乎是一样的布局,调整起来还是比较容

  • JavaScript 判断iPhone X Series机型的方法

    写在前面 如果有更优雅的方式,一定要告诉我! 现状 iPhone X 底部是需要预留 34px 的安全距离,需要在代码中进行兼容. 现状对于 iPhone X 的判断基本是这样的: // h5 export const isIphonex = () => /iphone/gi.test(navigator.userAgent) && window.screen && (window.screen.height === 812 && window.scr

  • Android监听横竖屏切换功能

    偶然在项目中用到播放视频时,需要横屏将视频全屏播放,所以需要监听屏幕的横竖屏切换事件. 横竖屏切换监听效果: ConfigChanges,用于捕获手机状态的改变,当横竖屏切换,屏幕尺寸变化,弹出键盘,系统设置改变等条件,就会触发回调事件onConfigurationChanged.让Activity捕捉到该事件,需要做如下步骤: 声明Activity需要捕捉的事件类型,在manifest的配置: <activity android:name=".MainActivity" and

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

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

  • JavaScript实现移动端横竖屏检测

    JavaScript实现移动端横竖屏检测

    本文实例为大家分享了JavaScript实现移动端横竖屏检测的具体代码,供大家参考,具体内容如下 一.HTML方法检测 在html中分别引用横屏和竖屏样式 <!-- 引用竖屏的CSS文件 portrait.css -->   <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external no

  • Android 横竖屏处理的知识小结

    Android 手机一般都支持横竖屏旋转,系统也会提供一个设置,控制允不允许旋转.这里对如何在 App 中控制界面的旋转方向做一个小结. 界面旋转方向的决定因素 决定一个界面显示为横屏/竖屏的因素有几个: 系统的设置项,一般可以设置为只允许竖屏或可旋转切换. 设备的物理传感器感应到的设备方向. 不同 App 里的代码对横竖屏的设置. 需要注意的一点是,这三个因素没有固定的优先级.所以即使系统的设置项中设置了固定为竖屏,App 里的代码也可以将界面设置为横屏,当然影响的范围仅限于 App 内部界面

随机推荐