H5网页判断手机横屏或是竖屏

我们做出来的H5页面在手机端浏览的时候,用户很有可能会产生更换横竖屏的操作,这时如果我们能够判断出横竖屏,就可以更好的优化我们的网页,进而拥有更好的用户体验度。下面是判断横竖屏的代码:

window.addEventListener(‘orientationchange‘, function(event){
    if ( window.orientation == 180 || window.orientation==0 ) {
        alert("竖屏");
    }
    if( window.orientation == 90 || window.orientation == -90 ) {
        alert("横屏");
    }
});

大家可以拿到手机上去试一下

时间: 2024-11-05 18:45:45

H5网页判断手机横屏或是竖屏的相关文章

判断手机横屏和竖屏方向

function orient() { if (window.orientation == 90 || window.orientation == -90) { //ipad.iphone竖屏:Andriod横屏 $("body").attr("class", "landscape"); orientation = 'landscape'; return false; }else if (window.orientation == 0 || wi

android手机横屏和竖屏与android:configChanges

原文地址:http://woshixy.blog.51cto.com/5637578/1081913 目前大多数手机都支持重力感应随之而来的就是屏幕方向改变的问题.对应普通开发者来说屏幕的随意改变也会带来困扰.在Google自带的doc里可以看到,如果设备的配置(Resources.Configuration中进行了定义)发生改变,那么所有用户界面上的东西都需要进行更新以适应新的配置.因为Activity是与用户交互的最主要的机制,它包含了处理配置改变的专门支持.除非你特殊指定,否则当配置发生改

android 强制设置横屏 判断是横屏还是竖屏

判断activity 是横屏还是竖屏  方法 1: //根据设备配置信息 Configuration cf= this.getResources().getConfiguration(); //获取设置的配置信息 int ori = cf.orientation ; //获取屏幕方向 if(ori == cf.ORIENTATION_LANDSCAPE){   //横屏 }else if(ori == cf.ORIENTATION_PORTRAIT){  //竖屏 }   方法2: 通过设备分辨

js判断手机浏览器是横屏or竖屏

移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序.通过添加监听事件onorientationchange,进行执行就可以了. //判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") } if(window.orientation==

使用JavaScript判断手机处于横屏还是竖屏

移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态.从而根据实际需求而执行相应的程序.通过添加监听事件onorientationchange,进行执行就可以了. //判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") } if(window.orientation==9

CSS3判断手机横屏竖屏

原理: 当用户旋转屏幕的时候,会进入到你的监听方法中,然后通过window.orientation来获取当前屏幕的状态:0 - 竖屏90 - 逆时针旋转横屏-90 - 顺时针旋转横屏180 - 竖屏,上下颠倒 如果你不希望用户使用横屏方式查看你的网页,你可以在设备旋转时间监听里面对body使用CSS3里面的transition中的旋转来保持页面竖向. 移动设备上的页面,当屏幕旋转的时候会有一个orientationchange事件.你可以给body元素增加此事件的监听: <body onorie

前端判断横屏还是竖屏

在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢.首先在head中加入如下代码: 1 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 针对上述viewport标签有如下说明1).content中的width

js如何设置网页横屏和竖屏切换

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>手机横.竖屏事

让activity保持横屏或者竖屏

让activity保持横屏或者竖屏有两种方式,一种是在activity的AndroidManifest.xml中设置 <activity android:name=".MainActivity" android:label="@string/app_name" <!--设置横屏 竖屏为portrait--> android:screenOrientation="landscape" > <intent-filter&