关闭

移动端判断是否处于横屏还是竖屏状态

标签: 移动js
234人阅读 评论(0) 收藏 举报
分类:
<style>
    @media screen and (orientation:portrait) {
        /* portrait-specific styles */
    }
    /* landscape */
    @media screen and (orientation:landscape) {
        /* landscape-specific styles */
    }
</style>

<script type="text/javascript">
    var mql = window.matchMedia("(orientation: portrait)");
    if(mql.matches) {
        alert("竖屏");
    } else {
        alert("横屏");
    }
    // 添加一个媒体查询改变监听者
    mql.addListener(function(m) {
        if(m.matches) {
            alert("竖屏");
        }
        else {
            alert("横屏");
        }
    });
</script>

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

移动端判断横屏竖屏

可能我们在写移动端项目的时候会有要求或者为了更好的体验会做横竖屏检测,以达到更好的用户体验。 // 判断横竖屏 var utils = { debounce: function(func,delay){ var timer = null; return fu...
  • Daisy__xu
  • Daisy__xu
  • 2017-05-03 10:16
  • 622

移动端判断手机横竖屏状态

在做移动端开发的时候,在HTML页面head中加入如下代码 [html] view plain copy print? meta name="viewport" content="width=device-width, u...
  • xiaozhi_2016
  • xiaozhi_2016
  • 2016-08-23 10:46
  • 2887

Android 判断横屏还是竖屏以及设置方式

还是这个手机项目,有一个需求是整个工程中只有刚进去的界面允许横屏显示,并且要将该界面的标题隐藏,当切换回竖屏显示的时候,标题变为可见,一开始我百度了一下有一个监听activity是否横屏竖屏的监听函数,如下: // 橫屏不重新加載activity,調用該方法 @Override public ...
  • omayyouhappy
  • omayyouhappy
  • 2015-11-05 17:52
  • 2129

HTML5实战与剖析之判断移动端横屏竖屏功能

在手机端经常游走的我们很多时候都会对横屏和竖屏的概念比较熟悉,大家都经常头疼怎么才能判断这横屏和竖屏的状态呢,今儿梦龙就为大家分享分享。
  • LiMengXiaoLong
  • LiMengXiaoLong
  • 2014-01-15 08:51
  • 11356

ios开发过程中屏幕方向判断的问题

判断屏幕的方法有很多着及仅提供几个我个人认为好用的方案 Landscape 竖屏 Portrait 横屏 最有效的方法是: 在willRotateToInterfaceOrientation:duration: 方法中将方向存储起来: DrviceOrientation = toInter...
  • jsjxiaobing
  • jsjxiaobing
  • 2014-12-09 19:49
  • 3977

移动网页横竖屏兼容适应的一些体会

【文章前提】 最近接到一个需求,是一个需要在手机端
  • wuweitiandian
  • wuweitiandian
  • 2014-11-24 15:23
  • 3621

移动端横竖屏问题--兼容iPhone、Android

移动端竖屏效果好做,可是如果在浏览器横屏的话页面瞬间变丑,怎么办呢,我来分享一下我的方法,希望对大家有所帮助。 首先,在页面内容的外面增加一个盒子,css样式如下:.main{ position: absolute; top: 0;bottom: 0;left: 50%; ...
  • mhlghy
  • mhlghy
  • 2017-04-20 11:54
  • 1366

用css3解决移动端页面自适应横屏竖屏的思考

之前对于横屏的webapp做过一些尝试,但是始终不是很好的解决方案,前段时间又接触了类似的需求,尝试了感觉更好的解决方案。 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会 这里举的例子还是平时常见的移动端的滑动页面,也就是上下切换页面的”H5“。
  • wuweitiandian
  • wuweitiandian
  • 2015-06-30 16:07
  • 7916

移动端手机横屏提示

【项目地址】: http://dwz.cn/RYgq7【手机二维码】:【效果】:【代码】 为了更好的体验,请使用竖屏浏览 /* 样式放在结尾,防止 base64 图片造成拥塞 */ @keyframes rotation { ...
  • huangyibin628
  • huangyibin628
  • 2015-06-21 17:40
  • 3291

ios 指定某个页面是横屏还是竖屏

ios 旋转
  • itpeng523
  • itpeng523
  • 2016-04-20 12:11
  • 4274
    个人资料
    • 访问:178963次
    • 积分:2985
    • 等级:
    • 排名:第13660名
    • 原创:131篇
    • 转载:1篇
    • 译文:0篇
    • 评论:33条
    文章分类
    最新评论