方法一:用resize事件来判断,利用屏幕的宽高比,来判断横竖屏 (兼容性较好)

(function () {

        var updateOrientation = function () {

            var orientation = (window.innerWidth > window.innerHeight)? 'landscape' : 'portrait';
if(orientation === 'landscape'){
//横屏
}
else if(orientation === 'portrait'){
//竖屏
}
}
var init = function () {
updateOrientation();
window.addEventListener('resize',updateOrientation,false);
}
window.addEventListener('DOMContentLoaded',init,false)
})()

方法二:css3媒体查询

@media all and ( orientation: portrait ){

       //竖屏
} @media all and ( orientation: landscape ){ //横屏
}

方法三:orientationChange事件  (我在谷歌测试的,弹出来undefined,这个不建议用,兼容性不好)

window.addEventListener("orientationchange", function() {
  
    alert(window.orientation);
}, false);

终结:需要操作js的用方法一,只需要改改样式的用方法二

js移动端横竖屏检测的更多相关文章

  1. 【原】js检测移动端横竖屏

    摘要:上周做了一个小项目,但是要放到我们的app上,然而需要横竖屏使用不同的样式.横屏一套,竖屏一套.调用了手机APP那里的api,可是他们那里ios和安卓返回的不一样. 各种头疼.于是用了css3的 ...

  2. Hammer.js移动端触屏框架的使用

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...

  3. JS判断手机横竖屏

    在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...

  4. js移动端触屏事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  5. js 判断手机横竖屏的实现方法(不依赖任何其他库)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. JS检测移动端横竖屏

    (function () {                                var supportOrientation = (typeof window.orientation == ...

  7. JS移动端滑屏事件

    来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...

  8. JS禁止横竖屏切换,强制横竖屏显示

    js判断屏幕横竖屏: function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == ...

  9. 移动端Web开发如何处理横竖屏

    <!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...

随机推荐

  1. PHP面向对象——GD库实现图片水印和缩略图

    今天的实现目标就是使用GD库完成对图片加水印和图 片缩略图两个功能 动身前逻辑准备 属性: 路径 功能: 构造方法 生成水印的方法 获取 图片信息 获取位置信息(123 456 789) 创建图片资源 ...

  2. Swift 2.0 自定义cell和不同风格的cell

    昨天我们写了使用系统的cell怎样创建tableView,今天我们再细分一下,就是不同风格的cell,我们怎写代码.先自己创建一个cell,继承于UItableviewcell 我们看看 cell 里 ...

  3. matlab中axis的使用

    % 提示 disp ('该功能练习axis功能'); %初始化快捷式数组 x=-*pi:pi/:*pi; y=sin(x); plot(x,y); title('sin(x)图形'); grid on ...

  4. 用手机或外部设备在同一局域网下访问虚拟主机wampsever的方法版本号是2.4.9

    1,首先在虚拟服务器电脑上可以打开http://localhost/ 2,在外部设备访问时报错为:You don't have permission to access / in on this se ...

  5. javascript学习-类型判断

    javascript学习-类型判断 1.类型判断的的武器 javascript中用于类型判断的武器基本上有以下几种: 严格相等===,用来判断null,undefined,true,false这种有限 ...

  6. 在 Windows 上安装 Hadoop 教程(转)

    在 Windows 上安装 Hadoop 教程 一见 2010.1.6 www.hadoopor.com/hadoopor@foxmail.com 1. 安装 JDK 不建议只安装 JRE,而是建议直 ...

  7. Vimium -为键盘而生

    The hacker's browser. 作为一个Chrome的忠实使用者,从开发人员工具到谷歌的扩展程序(extensions)[插件],这些都在无形之中提高我们的工作效率. N年前的一天,看到了 ...

  8. Unity渲染优化中文翻译(三)——GPU的优化策略

    如果游戏的渲染瓶颈来自于GPU 首要任务就是找出造成GPU瓶颈的因素所在,通常GPU的性能受到像素分辨率的影响,特别是在移动客户端的游戏,但是内存带宽和顶点计算的影响也需要注意.这些因素的影响都需要实 ...

  9. 关于c语言中栈和堆释放的问题

    #include<iostream> #include<string> using namespace std; int main() { string st; cin> ...

  10. 利用AForge.NET 调用电脑摄像头进行拍照

    当然了,你需要去官网下载类库,http://www.aforgenet.com/ 调用本机摄像头常用的组件: AForge AForge.Controls AForge.Imaging AForge. ...